In this article, we will learn how to remove all child nodes from all paragraphs 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 from all paragraphs in jQuery by using different methods.
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 the 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: In this example, we will use the above approach.
<!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 elements of the selected element including all the data and events. Here when we click on the button, jQuery selects all the child nodes with children and runs the remove function for the selected item. We follow the below steps:
- First, we create a click event that runs the function.
- It uses the children() function on the paragraph tag which selects all the nodes.
- Last, apply the remove() method on the selected child node of the paragraph.
Example: In this example, we will use the above approach.
<!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 jQuery
</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 an inbuilt function used for removing all the nodes and their contents for the selected item. The children method is used to select all the child nodes of the paragraph. We follow the below steps:
- We first wait for dom to load then run the function.
- Function listen for the button click event and then run the function.
- The function selects all the child nodes of the paragraph using the children() function.
- And selected elements are deleted by the empty() function.
Example: In this example, we will use the above approach.
<!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 jQuery
</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