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

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

青灯夜游

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

원래의

10313명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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