删除元素 - jQuery | 绿叶学习网

在jQuery中，想要删除元素，我们有以下3种方法。

（1）remove()
（2）detach()
（3）empty()

一、remove()

在jQuery中，我们可以使用remove()方法来将某个元素及其内部所有内容删除。

语法：

$().remove()

举例：remove()方法的使用


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.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>

默认情况下，浏览器浏览器预览效果如下图所示。

当我们点击【删除】按钮后，此时浏览器预览效果如下图所示。

分析：

$("li:nth-child(4)").remove()表示删除ul元素下的第4个li元素。记住，在jQuery中，除了:nth-child()和:nth-of-type()这两个的下标是从1开始的，其他所有选择器或jQuery方法的下标都是从0开始的。

举例：remove()方法会返回一个值


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //remove()可以将所选元素删除，并且返回被删除元素
                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>

默认情况下，浏览器预览效果如下图所示。

我们点击【删除】按钮后，此时浏览器预览效果如下图所示。

分析：

我们要清楚一点，就是remove()方法可以返回一个值，其中返回值为被删除的元素。也就是说，虽然这个元素被删除了，但是我们可以把返回值赋值给一个变量，然后再次使用被删除的元素。

在这个例子中，我们使用remove()方法删除<li>jQuery</li>这个元素。不过呢，我们将被删除的元素赋值给变量$li，然后就可以使用appendTo()方法将其添加到ul元素内部的末尾处。

实际上，利用remove()方法会返回一个值的特点，我们可以轻松实现两个元素的互换，请看下面例子。

举例：互换元素


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul li:nth-child(2), ul li:nth-child(4)
        {
            background-color:Orange;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //将内容为“CSS”这一个li删除，并赋值给$li1
                var $li1 = $("li:nth-child(2)").remove();
                //将内容为“jQuery”这一个li删除，并赋值给$li2
                var $li2 = $("li:nth-child(3)").remove();
                $($li1).insertAfter("ul li:nth-child(2)");
                $($li2).insertBefore("ul li:nth-child(2)");
            })
        })
    </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>

默认情况下，浏览器预览效果如下图所示。

我们点击【互换】按钮后，此时浏览器预览效果如下图所示。

分析：

在这个例子中，我们实现了内容为“CSS”和“jQuery”这两个li元素的互换。技巧就是借助了内容为“JavaScript”这个li元素作为参照物。虽然代码看起来很简单，不过要注意的地方并不少，小伙伴们最好自己亲自实践一下。

二、detach()

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

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

语法：

$().detach()

举例：


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("li").click(function () {
                alert("欢迎来到绿叶学习网！")
            });
            $("#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>

默认情况下，浏览器预览效果如下图所示。

当我们点击【删除】按钮后，此时浏览器预览效果如下图所示。

分析：

在这个例子中，我们为每一个li元素添加一个点击事件，点击任何一个li元素都会弹出一个对话框。然后当我们点击【删除】按钮后，<li>jQuery</li>这一项被添加到ul元素内部的末尾处。但是这个时候，如果再去点击<li>jQuery</li>这一项时，会发现之前绑定的点击事件被删除了，并不会弹出对话框。

当我们把remove()替换成detach()后，可以发现li元素被删除然后被重新添加使用后，该元素之前绑定的点击事件依然存在。

对于remove()和detach()这两个方法，可以总结一下：元素被删除然后重新被添加，如果不希望该元素还保留原来绑定的事件，应该用remove()方法；如果希望该元素还保留原来绑定的事件，应该使用detach()方法。

三、empty()

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

语法：

$().empty()

举例：


在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.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>

默认情况下，浏览器预览效果如下图所示。

当我们点击【删除】按钮后，此时浏览器预览效果如下图所示。

分析：

remove()和detach()这两个方法在删除元素时，会将自身元素以及所有后代元素一并删除。不过empty()方法仅仅是删除后代元素，并不会删除自身元素。