jqueryでhtmlタグを削除する方法-jsチュートリアル-php.cn

jqueryでhtmlタグを削除する方法

青灯夜游

リリース： 2021-10-29 18:20:19

オリジナル

4927 人が閲覧しました

削除メソッド: 1. Remove() メソッド、構文 "$(selector).remove()" を使用します; 2. detach() メソッド、構文 "$(selector).detach( )"; 3 、 empty() メソッド、構文 "$(selector).empty()" を使用します。

jqueryでhtmlタグを削除する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.7.2 バージョン、Dell G3 コンピューター。

jQuery では、要素を削除する場合、remove()、detach()、empty() の 3 つのメソッドがあります。

remove() メソッド

jQuery では、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 要素をクリックすると、ダイアログボックスが表示されます。 [削除]ボタンをクリックすると、ul要素の末尾に項目

jQuery

が追加されます。ただし、この時点で、

jQuery

項目を再度クリックすると、以前にバインドされたクリックイベントが削除され、ダイアログボックスが表示されないことがわかります。

remove() を detach() に置き換えると、li 要素が削除されてから再度追加されたときに、以前に要素にバインドされていたクリックイベントがまだ存在していることがわかります。 Remove() と detach() の 2 つのメソッドについては、次のように要約できます: 要素が削除され、再度追加されます。要素に元のバインドされたイベントを保持したくない場合は、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タグを削除する方法