dom 요소를 제거하기 위해 jquery를 사용하는 것은 무엇입니까?-프런트엔드 Q&A-php.cn

dom 요소를 제거하기 위해 jquery를 사용하는 것은 무엇입니까?

青灯夜游

풀어 주다： 2022-03-23 18:25:27

원래의

2186명이 탐색했습니다.

jquery는 다음을 사용합니다. 1. 지정된 dom 요소와 모든 콘텐츠를 삭제하는 제거() 메서드 2. 지정된 dom 요소와 모든 콘텐츠를 삭제하는 detach() 메서드, 그러나 바인딩된 이벤트는 삭제되지 않습니다. empty() 메소드는 지정된 하위 dom 요소를 제거할 수 있습니다.

dom 요소를 제거하기 위해 jquery를 사용하는 것은 무엇입니까?

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

jQuery에서는 dom 요소를 삭제하려는 경우 제거(), detach() 및 비어 있음()의 3가지 메서드가 있습니다.

1.remove() 메소드

remove( ) 메소드는 요소와 그 안의 모든 내용을 삭제할 수 있습니다.

$(selector).remove()

로그인 후 복사

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
	$(function () {
            $("#btn").click(function () {
                $("li:nth-child(4)").remove();
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

로그인 후 복사

$("li:nth-child(4)").remove()는 ul 요소 아래의 4번째 li 요소를 삭제한다는 의미입니다. jQuery에서 nth-child() 및 :nth-of-type()이라는 두 선택기를 제외하고 다른 모든 선택기 또는 jQuery 메서드의 첨자는 1부터 시작됩니다. 0이 시작되었습니다.

dom 요소를 제거하기 위해 jquery를 사용하는 것은 무엇입니까?

2.detach() 메소드

jQuery에서는 detach()와 delete()의 기능은 비슷하지만 둘 다 요소와 해당 내용을 모두 삭제하지만 분명한 차이점도 있습니다. 차이점.

remove() 메서드는 요소를 "완전히" 제거하는 데 사용됩니다. 소위 "완료"는 요소가 삭제될 뿐만 아니라 요소에 바인딩된 이벤트도 삭제된다는 것을 의미합니다.
detach() 메서드는 요소를 "반완전히" 삭제하는 데 사용됩니다. 소위 "반완료"는 요소만 삭제되고 해당 요소에 바인딩된 이벤트는 삭제되지 않음을 의미합니다.

$(selector).detach()

로그인 후 복사

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
	$(function () {
            $("li").click(function () {
                alert("欢迎来到PHP中文网！")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").detach();
                $($li).appendTo("ul");
            });
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

로그인 후 복사

이 예에서는 각 li 요소에 클릭 이벤트를 추가합니다. 모든 li 요소를 클릭하면 대화 상자가 나타납니다. [삭제] 버튼을 클릭하면 ul 요소 끝에

jQuery

항목이 추가됩니다.

dom 요소를 제거하기 위해 jquery를 사용하는 것은 무엇입니까?

이 때 다시

jQuery

항목을 클릭하면 이전에 바인딩된 클릭 이벤트가 존재하는 것을 확인하고 대화 상자가 나타납니다.

dom 요소를 제거하기 위해 jquery를 사용하는 것은 무엇입니까?

3.empty() 메서드

jQuery에서는 empty() 메서드를 사용하여 하위 요소를 "비울" 수 있습니다.

$(selector).empty()

로그인 후 복사

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("#btn").click(function () {
                $("ul li:nth-child(4)").empty();
            });
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

로그인 후 복사

dom 요소를 제거하기 위해 jquery를 사용하는 것은 무엇입니까?