jquery에서 html 태그를 삭제하는 방법-JS 튜토리얼-php.cn

jquery에서 html 태그를 삭제하는 방법

青灯夜游

풀어 주다： 2021-10-29 18:20:19

원래의

4899명이 탐색했습니다.

삭제 방법: 1. "$(selector).remove()" 구문의 제거() 메서드를 사용합니다. 2. detach() 메서드를 사용하고 "$(selector).detach()" 구문을 사용합니다. ) 메서드, 구문 "$(selector).empty()".

jquery에서 html 태그를 삭제하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.7.2 버전, Dell G3 컴퓨터.

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

remove() 메서드

jQuery에서는 제거() 메서드를 사용하여 요소와 그 안에 있는 모든 콘텐츠를 제거할 수 있습니다.

구문: $(selector).remove()$(selector).remove()

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.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>

로그인 후 복사

jquery에서 html 태그를 삭제하는 방법

detach( ) 方法

在 jQuery 中，detach() 和 remove() 的功能虽然相似，都是将某个元素及其内部所有内容删除，但是两者也有明显的区别。

remove() 方法用于“彻底”删除元素。所谓的“彻底”，指的是不仅会删除元素，还会把元素绑定的事件删除；
detach() 方法用于“半彻底”删除元素。所谓的“半彻底”，指的是只会删除元素，不会把元素绑定的事件删除。

语法：$(selector).detach()

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").detach();
});
});
</script>
</head>

<body>
<p>这是一个p元素段落</p>
<button>删除 p 元素</button>
</body>
</html>

로그인 후 복사

jquery에서 html 태그를 삭제하는 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function () {
            $("li").click(function () {
                alert("欢迎来到php中文网！")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").remove();
                $($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>

로그인 후 복사

jquery에서 html 태그를 삭제하는 방법

在这个例子中，我们为每一个 li 元素添加一个点击事件，点击任何一个 li 元素都会弹出一个对话框。在我们点击【删除】按钮后，

jQuery

这一项就会被添加到 ul 元素内部的末尾处。但是这个时候，如果再去点击

jQuery

这一项，会发现之前绑定的点击事件被删除了，并不会弹出对话框。

当我们把 remove() 替换成 detach() 后，可以发现 li 元素被删除后又重新被添加使用时，该元素之前绑定的点击事件依然存在。对于 remove() 和 detach() 这两个方法，可以总结为这一点：元素被删除后又重新被添加，如果不希望该元素保留原来绑定的事件，应该用 remove() 方法；如果希望该元素保留原来绑定的事件，应该使用 detach() 方法。

empty( )方法

在 jQuery 中，我们可以使用 empty() 方法来“清空”某个后代元素。

语法：$(selector).empty()

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.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>

로그인 후 복사

jquery에서 html 태그를 삭제하는 방법

detach( ) method

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

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

🎜구문: $(selector).detach()🎜🎜예: 🎜rrreee🎜 jquery에서 html 태그를 삭제하는 방법

🎜rrreee🎜

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

jQuery

항목이 추가됩니다. 하지만 이때 다시

jQuery

항목을 클릭하면 이전에 바인딩된 클릭 이벤트가 삭제되어 대화 상자가 팝업되지 않는 것을 확인할 수 있습니다. 🎜🎜remove()를 detach()로 바꾸면 li 요소가 삭제된 후 다시 추가될 때 이전에 해당 요소에 바인딩된 클릭 이벤트가 여전히 존재하는 것을 확인할 수 있습니다. Remove() 및 detach() 두 가지 메서드의 경우 다음과 같이 요약할 수 있습니다. 요소가 삭제된 다음 다시 추가됩니다. 요소가 원래 바인딩된 이벤트를 유지하지 않도록 하려면 Remove() 메서드를 사용해야 합니다. ; 요소는 원래 바인딩된 이벤트를 유지하며 detach() 메서드를 사용해야 합니다. 🎜🎜🎜empty() 메소드🎜🎜🎜jQuery에서는 empty() 메소드를 사용하여 하위 요소를 "비울" 수 있습니다. 🎜🎜구문: $(selector).empty()🎜🎜예: 🎜🎜rrreee🎜🎜🎜🎜권장 관련 비디오 튜토리얼: 🎜jQuery Tutorial🎜(비디오)🎜

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