关于remove的移除问题

来源:4-2 DOM节点删除之remove()的有参用法和无参用法

祈祈祈祈祷

2016-08-15 16:09

<!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>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通过jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <button>点击通过jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中,包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('p')")
    })
    </script>
</body>

</html>

~~~~~~~~~~~~~~~~~~~~~~~~

当我把包含的内容从3改成p后为什么连第一个按钮里的也删除了。这个不是已经制定了位置了么

写回答 关注

3回答

  • 爱飞的小脚丫
    2016-08-15 16:28:14
    已采纳

    因为$("p").remove(":contains('p')")中的选择器选中的是所有的p元素,remove中的参数选定的是即将被删除的元素,两个div中包含了p元素同时文本内容也包含了p,所以全部都被删除了~

    祈祈祈祈祷 回复动感超人98...

    谢谢,是我理解错误了

    2016-08-15 16:38:00

    共 3 条回复 >

  • 慕课网小马哥
    2016-08-15 16:43:00

    $("button:last")在这里表示的是第二个button, $("p").remove(":contains('p')")的意思是,当点击第二个按钮的时候,找到所有p元素中,文本里包含了‘3’的这个字符的p元素,也就是 <p>p元素3</p>,可以回去看下内容选择器的部分关于:contains的用法。

  • kyoku_shin
    2016-08-15 16:37:37

    $("button:last")只是针对button的click事件,

    可以把click function改成$(".test2 p").remove(":contains('p')")  对test2里的所有p元素查找

jQuery基础(二)—DOM篇

jQuery第二阶段开启DOM修炼,了解创建、插入、删除与替换

114012 学习 · 590 问题

查看课程

相似问题