Question

我有这个代码在屏幕上添加动态输入我需要解决输入名称

已知问题：
所有输入名称都相同： supplierproduct1
当我删除输入时，它只删除第一个输入而不是选择的输入

HTML

<div class="widget-box">
    <div class="widget-title"> <span class="icon"> <i class="icon-info-sign"></i> </span>
        <h5>Produtos</h5>
    </div>
    <div class="optionBox">
        <div class="block">
            <div class="widget-content nopadding" id="block">
                <div class="control-group">
                    <label class="control-label">Nome do produto</label>
                    <div class="controls">
                        <input type="text" maxlength="140" name="supplierproduct1" id="supplierproduct1"> 
                    </div>
                </div>
            </div>
        </div>
        <span class="add btn btn-success"> Adicionar produto </span>
    </div>
</div>

的Javascript

$('.add').click(function() {
    $('.block:last').before(' <div class="block" id="block"><div class="widget-content nopadding"><div class="control-group"><label class="control-label">Nome do produto</label><div class="controls"><input type="text" maxlength="140" name="supplierproduct1" id="supplierproduct1">  <span class="remove btn btn-danger"> Excluir </span>  </div></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
    $("#block").remove();
});

我很抱歉，我正在做一个系统来帮助我的商店，但我还在学习这些东西，所以我不能单独做，已经搜索但是无法做任何事情，只能使用例子。谢谢！

修改

解决方案：
HTML

<div class="widget-box">
    <div class="widget-title"> <span class="icon"> <i class="icon-info-sign"></i> </span>
        <h5>Produtos</h5>
    </div>
    <div class="optionBox">
        <div class="block">
            <div class="widget-content nopadding" id="block">
                <div class="control-group">
                    <label class="control-label">Nome do produto</label>
                    <div class="controls">
                        <input type="text" maxlength="140" name="supplierproduct[]" id="supplierproduct[]"> 
                    </div>
                </div>
            </div>
        </div>
        <span class="add btn btn-success"> Adicionar produto </span>
    </div>
</div>

JS

$('.add').click(function() {
    $('.block:last').after(' <div class="block" id="block"><div class="widget-content nopadding"><div class="control-group"><label class="control-label">Nome do produto</label><div class="controls"><input type="text" maxlength="140" name="supplierproduct[]" id="supplierproduct[]">  <span class="remove btn btn-danger"> Excluir </span> </div></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
    $(this).closest('.block').remove();
});

如何使用顺序名称创建div？

0 个答案: