検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryでhtmlタグを削除する方法

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

青灯夜游
青灯夜游オリジナル
2021-10-29 18:20:194931ブラウズ

削除メソッド: 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タグを削除する方法

    関連推奨されるビデオ チュートリアル:

    jQuery チュートリアル (ビデオ)

    以上がjqueryでhtmlタグを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    jquery html 事件 ul li
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：Nodejsでバージョンを確認する方法次の記事：Nodejsでバージョンを確認する方法

    関連記事

    続きを見る