使用JS动态添加元素和移除元素

nono_thin 2014-04-18 03:20:04

HTML代码：



<div id="ddd">

    <div class="div1" >

        <div class="div2">

            <div class="div3">

                <a>文本1</a>

            </div>

            <div class="div3">

                <button class="button1">删除</button>

            </div>

        </div>

        <div class="div2">

            <div class="div3">

                <a>文本2</a>

            </div>

            <div class="div3">

                <button class="button1">删除</button>

            </div>

        </div>        

<div>      

<button class="add">添加div</button>

JS代码：



<script type="text/javascript">

    //添加div

    $(".add").click(function () {

        var div = '<div class="div2"><div class="div3">自动添加的文本</div>' +

                      '<div class="commondivremove"><button class="button1">删除</button></div></div>';

        $("#ddd").append(div);

    });

    //移除div

    $("#ddd").on('click', 'button[class="button1"]', function () {

        $("#ddd").remove();

    });

</script>

问题：添加div可以成功，但是移除div总是无法成功？？在console中测试是可以找到筛选后button（原先的和动态添加的），可是为什么on事件无法成功呢？？

 $("#ddd button[class='button1']"

补充：当然，我的目的是删选特定的div，但是参数比较多，我不一一列出，就当是要移除所有子div的效果，希望有大神帮忙解答。

...全文

10461 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

nono_thin 2014-04-18

打赏
举报

引用 4 楼 Return_false 的回复:

元素的选择还是和你的页面结构有一定关系的，当你尝试要操作对应的元素时，你应该考虑从当前触发的元素开始查找，以当前元素作为参照，然后去找操作的元素，也许你可以通过开发者人员工具，来查看本身有没有脚本错误，甚至必要时可以加断点逐步调试.

确实，js放的位置不太对。

人生难得一只鸡 2014-04-18

打赏
举报

元素的选择还是和你的页面结构有一定关系的，当你尝试要操作对应的元素时，你应该考虑从当前触发的元素开始查找，以当前元素作为参照，然后去找操作的元素，也许你可以通过开发者人员工具，来查看本身有没有脚本错误，甚至必要时可以加断点逐步调试.

nono_thin 2014-04-18

打赏
举报

引用 1 楼 Return_false 的回复:

我试了你写的，确实可以；我这个代码是简化版的，原来的内容比较复杂，不知道是不是有什么地方冲突了，纠结。。

难以取舍 2014-04-18

打赏
举报

你要看一下你的JQ库是什么版本的，有些老的版本是没有支持on的。。

人生难得一只鸡 2014-04-18

打赏
举报

删除相应的div，你的有问题吗？貌似把整个最外层删掉了


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
    //添加div
    $(".add").click(function () {
        var div = '<div class="div2"><div class="div3">自动添加的文本</div>' +
                      '<div class="commondivremove"><button class="button1">删除</button></div></div>';
        $("#ddd").append(div);
    });
    //移除div
    $("#ddd").on('click', 'button[class="button1"]', function () {
        $(this).parents('.div2').remove();
    });
    })
</script>
</head>

<body>

<div id="ddd">
    <div class="div1" >
        <div class="div2">
            <div class="div3">
                <a>文本1</a>
            </div>
            <div class="div3">
                <button class="button1">删除</button>
            </div>
        </div>
        <div class="div2">
            <div class="div3">
                <a>文本2</a>
            </div>
            <div class="div3">
                <button class="button1">删除</button>
            </div>
        </div>        
<div>      
<button class="add">添加div</button>

</body>
</html>