remove问题 jQuery基础二 DOM篇 4-2

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

Timi21

2016-09-25 11:14

为什么第一次remove了p元素,第二次remove的时候还要将前面的p算上,:contains('3')而不是:contains('1'),这样说,内部是不是依然没有删除的,只是不显示

写回答 关注

2回答

  • qq_一个人乐的小兔子_03311008
    2016-12-07 11:54:15

    首先,你对contains筛选的理解可能不太对,contains('3')的意思不是筛选出索引的第三个元素,而是筛选出文本内容包含'3'的元素。所以,执行了remove方法之后是删除了test1中的p元素的。

  • 游学者_伆盳訫啽
    2016-09-25 13:40:19

    首先你要明白:contains()选择器的用法

    http://img.mukewang.com/57e761a50001cba805160506.jpg

    也就是说

    $("p").remove(":contains('3')")

    这一句代码的含义不是指删除第三个p元素,而是指删除text中含有3的p元素。因此当你删除p元素3后,再次点击自然不会继续remove p元素。

    为了加深你的理解:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <link rel="stylesheet" href="">

    <style>

    .btn

    {

    cursor:pointer;

    }

    </style>

    </head>

    <body>

    <div class="test1">

            <p>p元素1</p>

            <p>p元素2</p>

        </div>

        <div class="test2">

            <p>p元素3</p>

            <p>p元素4</p>

        </div>

    <div id="btn_remove" class="btn">删除第二个p元素</div>

    <script type="text/javascript" src="js/jquery-1.11.3.min.js">

    </script>

    <script type="text/javascript">

    $("#btn_remove").on("click",function()

    {

    var length = $("p").length;

    index = 0;

    $("p").each(function()

    {

    if(index == 1)

    {

    $(this).remove();

    }

    index++;

    })

    })

    </script>

    </body>

    </html>

    当你点击删除第二个p元素后,

    57e762fa0001725901950179.jpg

    p元素2会被删除

    57e762fa000174a401810148.jpg

    当你点击删除第二个p元素后

    57e762fb0001d23801900117.jpg

    p元素3会被删除(因为此刻p元素3位于p元素集合中第二个位置)

    不知道这样讲,你明白了吗?还有问题可以联系我。

jQuery基础(二)—DOM篇

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

114012 学习 · 590 问题

查看课程

相似问题