How to removes all child nodes from all paragraphs in jQuery ?
In this article, we will learn how to remove all child nodes from all paragraph in jQuery. Child nodes are the sub-tags of the paragraph. Here, our task is to remove all the sub-tags from the <p> tag in DOM. We can remove all child nodes form all paragraph in jQuery by using different method.
Approach 1: In this approach, we will use detach() method which is used to remove the selected item from the dom. We listen to the button click event after that we select the child elements using children method and delete the child node. We follow the below steps:
- First we select the child nodes with the children() method.
- After selecting all the nodes of the paragraph, we use detach() method.
Approach 2: In this Approach, we will use the remove() method which is used to remove all the element of selected element includes all the data and events. Here when we click on button, jQuery select all the child nodes with children and run the remove function for selected item. We follow the below steps:
- First we create a click event that run the function.
- It use children() function on paragraph tag which select the all the node.
- At last apply remove() method on selected child node of paragraph.
Approach 3: In this Approach, we will use the empty() method which is inbuilt function used for remove all the node and it’s contents for selected item. The children method is used to select all the child node of paragraph. We follow the below steps:
- We first wait for dom to load then run the function.
- Function listen for button click event and then run the function.
- Function selects all the child node of paragraph using children() function.
- And selected elements are deleted by the empty() function.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.