Question

<div id="Bulk_DiV">
        <p>
           <a href="#" id="addBulk" class="link_icon_plus"></a>&nbsp;
            <input type="text" id="BulkItem[0]_Quantity" size="20" name="BulkItem[0].Quantity" placeholder="Please enter quantity..."/>&nbsp;
            <input type="text" id="BulkItem[0]_UnitPrice" size="20" name="BulkItem[0].UnitPrice" placeholder="Please enter unit price..."/>&nbsp;
            <input type="text" id="BulkItem[0]_TotalPrice" size="20" name="BulkItem[0].TotalPrice" placeholder="Please enter total price..."/>
        </p>
    </div>


<script>
         $(function () {
            var bulkDiv = $('#Bulk_DiV');
            var i = $('#Bulk_DiV p').size();

            $('#addBulk').live('click', function () {

                  bulkDiv.append('<p>');
            $('<a>').attr( {
                href: '#',
                id: 'addBulk',
                class: 'link_icon_plus'
            }).appendTo(bulkDiv);

            bulkDiv.append('&nbsp;&nbsp;');

            $('<input>').attr({
                type: 'text',
                id: 'BulkItem_Quantity',
                name: 'BulkItem[' + i + '].Quantity',
                size: '20',
                placeholder: 'Please enter quantity...'
            }).appendTo(bulkDiv);

            bulkDiv.append('&nbsp;&nbsp;');

            $('<input>').attr({
                type: 'text',
                id: 'BulkItem_UnitPrice',
                name: 'BulkItem[' + i + '].UnitPrice',
                size: '20',
                placeholder: 'Please enter unit price...'
            }).appendTo(bulkDiv);

            bulkDiv.append('&nbsp;&nbsp;');

            $('<input>').attr({
                type: 'text',
                id: 'BulkItem_TotalPrice',
                name: 'BulkItem[' + i + '].TotalPrice',
                size: '20',
                placeholder: 'Please enter total price...'
            }).appendTo(bulkDiv);
            bulkDiv.append('&nbsp;&nbsp;');
            $('<a>').attr({
                href: '#',
                id: 'removeBulk',
                name: 'removeBulk',
                class: 'link_icon_minus'
            }).appendTo(bulkDiv);

                bulkDiv.append('</p>');

                i++;
                return false;
            });

            $('#removeBulk').live('click', function () {
                if (i > 1) {
                    $(this).parents("p").remove();
                    i--;
                }
                return false;
            });
        });
    </script>

这是我的代码，我可以动态添加文本框但我不能删除它虽然我使用.remove（）。它假设工作，但当我在代码中更改某些内容时，它不再起作用。我无法发现任何错误...... 所有文本框都有自己的ID以获取数据。

Answer 1

首先，不推荐使用.live。请改用.on。其次，我建议使用Handlebars模板之类的东西来为每个项目创建HTML，否则不会一次添加每个元素。附加非破坏空格也不是一个好主意，使用CSS为元素添加一些间距。

您可以使用“BulkItem []。TotalPrice”等作为输入名称，而不是使用i变量来计算索引。它将在提交给服务器时转换为项目数组。

不要重复使用ID。改为使用类。

要删除，您可以在容器元素上使用冒泡事件。这实际上意味着“当在#Bulk_DiV中单击任何带有.item-remove类的元素时，使用类.item删除最接近的父元素”。像这样的委托事件允许您使用单个处理程序，而不是为每个元素附加一个。这样可以在大量元素的情况下获得更好的性能。

$('#Bulk_DiV').on('click', '.item-remove', function() {
    $(this).closest('.item').remove(); 
});

Javascript删除动态添加的文本框

1 个答案: