Javascript 每次单击remove时都删除附加的div_Javascript_Jquery_Html_Css

Javascript 每次单击remove时都删除附加的div

javascript jquery html css

Javascript 每次单击remove时都删除附加的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个列表，当我单击“添加”时，我会添加新的div。如何在每次单击“删除”时删除附加的div。这是我的密码： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="content">

我有一个列表，当我单击“添加”时，我会添加新的div。如何在每次单击“删除”时删除附加的div。这是我的密码：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div class="content">
        <ul class="pricepart">
            <li><input type="text" />
           <span class="add">ADD+</span></li>
        </ul>
    </div>
    <div class="content">
        <ul class="pricepart">
            <li> <input type="text" />
            <span class="add">ADD+</span></li>
        </ul>
    </div>
<script>
    $(".add").click(function () {
      $(this).closest('.content').append('<ul class="pricepart"><li><input type="text"/><span class="remove">Remove -</span></li></ul>');
    });
</script>

<script>
    $(".remove").click(function () {
        $(this).closest('.content').remove();
    });
</script>    
</body>
</html>




加+



加+

$（“.add”）。单击（函数（）{
$（this）.closest（“.content”）.append（“删除-”）；
});
$（“.remove”）。单击（函数（）{
$（this）.closest（'.content'）.remove（）；
});

试试这种方法

$(document).ready(function () {
            $(".add").click(function () {
                $(this).closest('.content').append('<ul class="pricepart"><li><input type="text"/><span class="remove">Remove -</span></li></ul>');

                $(".remove").click(function () {
                    $(this).parents('ul').remove();
                });
            });

        })

$（文档）.ready（函数（）{
$（“.add”）。单击（函数（）{
$（this）.closest（“.content”）.append（“删除-”）；
$（“.remove”）。单击（函数（）{
$（this.parents（'ul'）.remove（）；
});
});
})

将脚本更改为：

$("body").on("click", ".remove", function () {
  $(this).closest("ul").remove();
});

您将向每个类为“.remove”的项添加一个处理程序，即使它是动态添加的。此外，我猜您希望删除最接近的项目“ul”

工作小提琴：

可以吗？：）


$（“body”）。在（'click'，'remove'，函数（）{
$（this.parents（'.pricepart'）.remove（）；
});

您的问题令人困惑。您正在向div追加一个列表，因此不能说“如何删除追加的div”，因为您没有追加div。请重写您的问题以使其更清楚。可能重复的更好方法是委派事件，这将避免将多个单击事件绑定到先前添加的元素

<script>
    $("body").on('click', '.remove', function () {
        $(this).parents('.pricepart').remove();
    });
</script>