How to delete child elements in javascript-JS Tutorial-php.cn

How to delete child elements in javascript

青灯夜游

Release： 2023-01-07 11:44:32

Original

10367 people have browsed it

In JavaScript, you can use the removeChild() method to delete a child element. This method can delete a node from the child node list of the specified element, that is, delete the specified child element; the syntax format is "parent element object. removeChild(child element)".

How to delete child elements in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

javascript deletes child elements

In javascript, you can use the removeChild() method to delete child elements. Let’s learn more about it through examples.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				border: 2px dashed #006DAF;
				padding: 10px;
			}
			p{
				border: 2px dashed #006DAF;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div>div元素
			<h2>一个标题</h2>
			<p>一个段落</p>
		</div><br />
		<input id="btn" type="button" value="删除div中的子元素p">
	</body>
	<script>
		function deleteChild() {
			var div = document.querySelector("div");
			var p = document.querySelector("p");

			div.removeChild(p);

		}
		var btn = document.getElementById("btn").onclick = function() {
			deleteChild();
		}
	</script>

</html>

Copy after login

Rendering:

How to delete child elements in javascript

Description:

removeChild( ) method can delete a node from the list of child nodes. The usage is as follows:

nodeObject.removeChild(node)

Copy after login

The parameter node is the node to be deleted. If the deletion is successful, the deleted node is returned; if it fails, null is returned.

When using the removeChild() method to delete a node, all child nodes contained in the node will be deleted at the same time.

Example 1

In the example below, the first-level title in the red box will be deleted when the button is clicked.

<div id="red">
    <h1>红盒子</h1>
</div>
<div id="blue">蓝盒子</div>
<button id="ok">移动</button>
<script>
    var ok = document.getElementById ("ok");  //获取按钮元素的引用
    ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
        var red = document.getElementById ("red");  //获取红色盒子的引用
        var h1 = document.getElementsByTagName("h1")[0];  //获取标题元素的引用
        red.removeChild(h1);  //移出红盒子包含的标题元素
    }
</script>

Copy after login

Example 2

If you want to delete the blue box, but cannot determine its parent element, you can use the parentNode attribute to quickly obtain the reference of the parent element, and use this reference to Implement the delete operation.

var ok = document.getElementById ("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var blue= document.getElementById ("blue");  //获取蓝色盒子的引用
    var parent = blue.parentNode;  //获取蓝色盒子父元素的引用
    parent.removeChild(blue);  //移出蓝色盒子
}

Copy after login

If you want to insert the deleted node into another location in the document, you can use the removeChild() method, or you can use the appendChild() and insertBefore() methods to achieve this.

Example 3

Deleting nodes is as frequently used as creating and inserting nodes in DOM document operations. For this reason, the delete node operation function can be encapsulated.

//封装删除节点函数
//参数：e表示预删除的节点
//返回值：返回被删除的节点，如果不存在指定的节点，则返回undefined值
function remove (e) {
    if (e) {
        var _e = e.parentNode.removeChild(e);
        return _e;
    }
    return undefined;
}

Copy after login

Example 4

If you want to delete all child nodes under the specified node, the encapsulation method is as follows:

//封装删除所有子节点的方法
//参数：e表示预删除所有子节点的父节点
function empty (e) {
    while (e.firstChild) {
        e.removeChild (e.firstChild);
    }
}

Copy after login

[Recommended learning: javascript advanced tutorial】

The above is the detailed content of How to delete child elements in javascript. For more information, please follow other related articles on the PHP Chinese website!