jQuery 删除、复制节点

不废话，直接上代码：

案例源码（待会用于操作的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 删除、复制节点</title>
    <script type="text/javascript" src="../jquery-3.4.1.min.js"></script>
    <style>

        .box{

            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--删除-->
<!--关键字  Remove empty  detach-->
<!--
语法：
$(标签对象).remove();
$(标签对象).empty();
$(标签对象).detach();


-->
<div class="box">
    <p id="a">中秋节快乐!!!</p>
    <p>明天不用上课</p>
</div>

<script>

    $(function () {

        $("#a").click(function () {

            alert("绑定测试");
        })


    })

    // $("#a").remove();


</script>
</body>
</html>

测试结果：

开始测试：删除

删除有三个关键字待会会分别测试分别是 Remove empty detach

Remove:

结果是：

删除后再把这个添加到box里

再来测试结果：

发现怎么点也不会跳出alert写的，也就是使用remove时将其删除了，使绑定事务失效了

但如果用var a 还是可以接，所以remove是删除节点并且保留自身，但绑定的事务也失效了

使用empty

只是删除了内容，保留样式和节点

（因此要慎用）

使用detach

测试结果：

也是删除节点，保留自身，但绑定事件并没有失效

总结：

remove: 使用是删除节点，保留自身，绑定事件失效

empty : 使用是清空内容，保留节点和样式，要慎用

detach: 使用是删除节点，保留自身，绑定事件有效

---------------------------------------------------------------------------------------------------------------------

复制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点</title>
    <script type="text/javascript"src="../jquery-3.4.1.min.js"></script>
    <style>
        .shop_car{
            width: 400px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<!--要有一个商品栏-->
<div class="shop">
    <p>商品1</p>
    <p>商品2</p>
    <p>商品3</p>

</div>
<body>


<div class="shop_car">
<!--    这里就是购物车-->

</div>


<script>
    /*
    语法：
    $(标签对象).clone(boolean);
     */
    //需求点击哪一个就将其添加到购物车中
    //制造绑定事件
    $(function () {
        $(".shop p").click(function () {
            //找到要复制的节点并复制

            var p = $(this).clone(true);
            //添加到购物车中
            $(".shop_car").append(p);

        })
      

    })




</script>




</body>
</html>

结果:

jQuery 删除、复制节点

猜你喜欢