자바스크립트에서 하위 요소를 삭제하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 하위 요소를 삭제하는 방법

青灯夜游

풀어 주다： 2023-01-07 11:44:32

원래의

10354명이 탐색했습니다.

JavaScript에서는 RemoveChild() 메서드를 사용하여 하위 요소를 삭제할 수 있습니다. 이 메서드는 지정된 요소의 하위 노드 목록에서 노드를 삭제할 수 있습니다. 즉, 구문 형식은 "부모"입니다. 요소 object.removeChild(하위 요소 )".

자바스크립트에서 하위 요소를 삭제하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

javascript 하위 요소 삭제

자바스크립트에서는 RemoveChild() 메서드를 사용하여 하위 요소를 삭제할 수 있습니다. 사례를 통해 자세히 알아보겠습니다.

<!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>

로그인 후 복사

Rendering:

자바스크립트에서 하위 요소를 삭제하는 방법

Description:

removeChild() 메서드는 하위 노드 목록에서 노드를 삭제할 수 있습니다. 사용법은 다음과 같습니다.

nodeObject.removeChild(node)

로그인 후 복사

파라미터 노드는 삭제할 노드입니다. 삭제에 성공하면 삭제된 노드가 반환되고, 실패하면 null이 반환됩니다.

removeChild() 메서드를 사용하여 노드를 삭제하면 해당 노드에 포함된 모든 하위 노드가 동시에 삭제됩니다.

예제 1

아래 예에서는 버튼을 클릭하면 빨간색 상자 안의 첫 번째 수준 제목이 제거됩니다.

<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>

로그인 후 복사

예제 2

파란색 상자를 삭제하고 싶지만 해당 상위 요소를 확인할 수 없는 경우 parentNode 속성을 사용하여 상위 요소의 참조를 빠르게 얻고 이 참조를 사용하여 삭제 작업을 구현할 수 있습니다.

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

로그인 후 복사

삭제된 노드를 문서의 다른 위치에 삽입하려면 RemoveChild() 메서드를 사용하거나,appendChild() 및 insertBefore() 메서드를 사용하면 됩니다.

예제 3

노드 삭제는 DOM 문서 작업에서 노드 생성 및 삽입만큼 자주 사용됩니다. 이러한 이유로 노드 삭제 작업 기능을 캡슐화할 수 있습니다.

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

로그인 후 복사

예제 4

지정된 노드 아래의 모든 하위 노드를 삭제하려는 경우 캡슐화 방법은 다음과 같습니다.

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

로그인 후 복사

[추천 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트에서 하위 요소를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!