DOM ノードを削除する empty() の基本的な使用法

ページ上のノードの削除は、開発者にとって一般的な操作です。jQuery には、この問題に対処するためのさまざまなメソッドが用意されています。ここでは、空のメソッドを詳しく見ていきます

名前が示すように、空のメソッドは少し異なります。削除も、指定された要素内のすべての子ノードを削除するだけなので同じです。

このメソッドは、子要素 (および他の子孫要素) を削除するだけでなく、要素内のテキストも削除します。説明によれば、要素内の任意のテキスト文字列は要素の子ノードとみなされます。

以下に分析の例を書いてみましょう:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    div {
        background: #bbffaa;
        width: 300px;
    }
    </style>
</head>

<body>
    <div id="div">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on('click', function() {
        //通过empty移除了当前div元素下的所有p元素
        //但是本身id=test的div元素没有被删除
        $("#div").empty()
    })
    </script>
</body>

</html>

ブラウザを使用してこのコードを開いて実行し、F12 キーを押します。次の <div id="div"></div> が削除されていないことがわかります。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> div { background: #bbffaa; width: 300px; } </style> </head> <body> <div id="div"> <p>p元素1</p> <p>p元素2</p> </div> <button>点击通过jQuery的empty移除元素</button> <script type="text/javascript"> $("button").on('click', function() { //通过empty移除了当前div元素下的所有p元素 //但是本身id=test的div元素没有被删除 $("#div").empty() }) </script> </body> </html>

提出するリセットコード

自動運転