Javascript removeChild() method to delete nodes and delete child nodes_javascript skills

The following will introduce to you how to delete nodes using Javascript removeChild(). The specific details are as follows:

In Javascript, there is only one method to delete nodes: removeChild().

removeChild() method is used to delete a child node of the parent node.

Grammar:

parent.removeChild(thisNode)

Parameter description:

参数	说明
thisNode	当前节点，即要删除的节点
parent	当前节点的父节点，即 thisNode.parentNode

For example, the statement to delete the node with id="demo" is:

var thisNode=document.getElementById("demo");
thisNode.parentNode.removeNode(thisNode);

For example, delete node:

<div id="demo">
  <div id="thisNode">点击删除我</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
  this.parentNode.removeChild(this);
}
</script>

Example demonstration:

It can be seen that although Javascript only provides one method to delete nodes, it is enough.

ps: JavaScript method to delete child nodes

The HTML code is as follows:

<div id="f"> 
 <div>a</div> 
 <div>b</div> 
 <div>c</div> 
</div> 

If you want to delete all the child nodes under the f node, the natural and normal method that comes to mind should be the following code:

var f = document.getElementById("f"); 
var childs = f.childNodes; 
for(var i = 0; i < childs.length; i++) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
} 

When the program was run, we found that no matter whether under FireFox or IE, all child nodes could not be completely deleted (the blank area was also deleted in FireFox
as a node, so the result of deleting the node will be different), this is because when you delete the child node with index 0, it is natural that the original index
At this time, the index of the node that is 1 becomes 0, and at this time the variable i has become 1. When the program continues, it will delete the node with the original index of 2 and now it is 1. In this way, the result of running the program is that only the node is deleted. For half of the child nodes, the result of traversing using for in is the same. Want to delete all nodes normally
If so, we should delete from the back to the front, the code is as follows:

for(var i = childs.length - 1; i >= 0; i--) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
} 

We start deleting from the maximum index value, using a decreasing method, so that the index will not move or change.