首页 > 编程笔记 > JavaScript笔记 > jQuery DOM操作

jQuery remove()方法的用法

在 jQuery 中，想要删除元素，我们有以下 3 种方法：remove()、detach( ) 和 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>
默认情况下，预览效果如图 1 所示。
默认效果
图 1：默认效果

我们点击【删除】按钮后，此时预览效果如图 2 所示。
点击按钮后的效果
图 2：点击按钮后的效果

$("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>
默认情况下，预览效果如图 3 所示。
默认效果
图 3：默认效果

我们点击【删除】按钮后，此时预览效果如图 4 所示。
点击按钮后的效果
图 4：点击按钮后的效果

我们要清楚一点，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>
默认情况下，预览效果如图 5 所示。
默认效果
图 5：默认效果
我们点击【互换】按钮后，此时预览效果如图 6 所示。
点击按钮后的效果
图 6：点击按钮后的效果

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

所有教程

优秀文章