Question

我想使用jquery添加和删除div元素并且添加div元素工作正常但删除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=iso-8859-1">
<title>jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
var count = 0;
$(document).ready(function(){
    $('p#add_field').click(function(){
        count += 1;
        $('#container').append(
                '<div><div><label><strong>Link' + '</strong></label><br />' 

                + '<input id="field_' + count + '" name="fields[]' + '" type="text" /><br /></div>' 
                +'<div><a href="#" class="remove">Remove selection</a></div></div>  ');

    });

    $('.remove').on('click', function () {
        $(this).parent().parent().remove();
        return false;
    });

});
</script> 

<body>

        <div id="container">
            <p id="add_field"><a href="#"><span>&raquo; Add your favourite links.....</span></a></p>
        </div>

</body>
</html>

如果有人知道解决方案，请帮帮我!!!

Answer 1

当您致电$('.remove').on('click',function () {时，您的商品是动态创建的，并且它们不存在。

尝试像这样修改你的脚本：

$('#container').on('click','.remove',function () {
    $(this).parent().parent().remove();
    return false;
});

删除div元素不起作用

1 个答案: