javascript - 无法使用 jQuery 删除附加元素

Question

我使用 jQuery 创建了一个简单的多文本输入，附加文本字段工作正常。但是，努力消除它们。我用谷歌搜索，检查了过去的问题，但是不知道如何将它们与我的代码相匹配。

这是我的代码

$(document).ready(function () {
    var i = 1;
    (function () {
        $('.dd').on('click', '.addRow', function () {
            i = i+1;
            var start = $('#fields'),
            newRow = $('<input type="text" name="i" class="quantity" /><p class="xx">X</p><br><br>');
            $(start).append(newRow);
        });
    })();
});

HTML

<div class="dd">
    <form action="js-more-fields.php" method="get">
        <div id="fields">
        </div>
        <p class="addRow">Add a Row</p>
        <input type="submit" id="submit" />
    </form>
</div>

Answer 1

这里正在工作 fiddle

 $(document).ready(function () {
    var i = 1;
    (function () {
        $('.dd').on('click', '.addRow', function () {
            i = i+1;
            var start = $('#fields'),
                newRow = $('<div id='+i+'><input type="text" name="i" class="quantity"/><span class="delete">X</span></div><br/>');
            $(start).append(newRow);
        });
        $('body').on('click', '.delete', function(e) {
        $(this).parent().remove();
       });


    })();
    });

:您正在尝试绑定(bind)对不存在的动态创建元素的点击。您可以使用 delegate 或 on 来执行此操作。