jQuery DOM 操作の空と削除の違い

指定した要素を削除したい場合、jQueryにはempty()とremove([expr])の2つのメソッドが用意されていますが、どちらも要素を削除しますが、

emptyメソッド

厳密に言えば、 empty() メソッドはノードを削除しませんが、要素内のすべての子孫ノードをクリアできます

empty は自身のノードを削除できません

remove メソッド

このノードとこれに含まれるすべての子孫ノードノードも同時に削除されます

指定されたコレクション内の要素を削除するフィルター式を提供します

以下では、コードを使用して詳細に分析します

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>remove()与empty()的区别</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style type="text/css">
        #dv1{
            width:250px;
            height:250px;
            background:red;
            float:left;
        }

        #dv2{
            width:250px;
            height:250px;
            background:green;
            float: left;
            margin-left:5px;
            margin-right:5px;
        }
    </style>
</head>
<body>
    <div id="dv1">
        <p>元素1</p>
        <p>元素2</p>
    </div>

    <div id="dv2">
        <p>元素3</p>
        <p>元素4</p>
    </div>
    <input type="button" value="empty" id="but1">
    <input type="button" value="remove" id="but2">

    <script>
        $("#but1").click(function(){
            $("#dv1").empty();
        })

        $("#but2").click(function(){
            $("#dv2").remove();
        })
    </script>
</body>
</html>

上記のコードは、実行後、次のことがわかります空をクリックすると、要素 1 と要素 2 はクリアされますが、div はまだ存在します

削除をクリックすると、内部の要素が削除されるだけでなく、div 自体も削除されます

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>remove()与empty()的区别</title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style type="text/css"> #dv1{ width:250px; height:250px; background:red; float:left; } #dv2{ width:250px; height:250px; background:green; float: left; margin-left:5px; margin-right:5px; } </style> </head> <body> <div id="dv1"> <p>元素1</p> <p>元素2</p> </div> <div id="dv2"> <p>元素3</p> <p>元素4</p> </div> <input type="button" value="empty" id="but1"> <input type="button" value="remove" id="but2"> <script> $("#but1").click(function(){ $("#dv1").empty(); }) $("#but2").click(function(){ $("#dv2").remove(); }) </script> </body> </html>

提出するリセットコード

自動運転