1

我想使用 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>

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

4

1 回答 1

2

当您调用时，您的项目是动态创建的，并且它们不存在$('.remove').on('click',function () {。

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

$('#container').on('click','.remove',function () {
    $(this).parent().parent().remove();
    return false;
});
于 2012-07-04T14:37:00.677 回答