Skip to content
Related Articles

Related Articles

Improve Article

How to removes all child nodes from all paragraphs in jQuery ?

  • Last Updated : 19 Sep, 2021
Geek Week

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.

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <title>
        How to remove all child nodes 
        from all paragraphs?
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <p>
        How to remove all child nodes from 
        all paragraphs in jquery
        <br><br>
          
        <b>
            This node will be removed by 
            the detach of jquery
        </b>
    </p>
  
    <button style="background-color:green;
        border: none; color: black">
        REMOVE
    </button>
  
    <script>
  
        // jQuery for deleting child node
        $("button").click(function () {
            $("p").children().detach();
        });
    </script>
</body>
  
</html>

Output: 

Removing node with detach

 



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.

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <title>
        How to remove all child nodes 
        from all paragraphs?
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <p>
        How to remove all child nodes from 
        all paragraphs in jquery
        <br><br>
  
        <b>
            This node will be removed by the 
            remove method of jquery
        </b>
        <br>
  
        <i>
            For removing we use remove 
            function of jQery 
        </i>
    </p>
  
    <button style="background-color:black;
        border: none; color: white">
        REMOVE
    </button>
  
    <script>
  
        // jQuery for deleting child node
        $("button").click(function () {
            $("p").children().remove();
        });
    </script>
</body>
  
</html>

Output: 

Removing node with remove

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.

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
      
    <title>
        How to remove all child nodes 
        from all paragraphs?
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <p>
        How to remove all child nodes 
        from all paragraphs in jquery
        <br><br>
  
        <b>
            This node will be removed by 
            the empty method of jquery
        </b>
        <br>
          
        <b>
            <i>
                For removing we use Empty 
                function of jQery 
            </i>
        </b>
    </p>
  
    <button style="background-color:Gray;
        border: none; color: black">
        REMOVE
    </button>
  
    <script>
  
        // jQuery for deleting child node
        $(document).ready(function () {
            $("button").click(function () {
                $("p").children().empty();
            });
        });
    </script>
</body>
  
</html>

Output: 

Removing node with empty

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :