Question

我有一个通过“追加”将输入添加到表单的功能，还有另一个按钮可以删除输入的输入。为此，使用“ last-child”，我删除了最后一个生成的div，但是从这里开始，该按钮停止工作，并且我无法消除先前引入的其他元素。

也就是说，如果我只输入一个元素，它将删除它而不会出现问题，但是当我有多个元素时，它只会删除一次，并且删除功能会停止工作。

你知道该怎么办吗？

$( ".add_button" ).click(function() {
  var first = document.getElementById('producto');
var options = first.innerHTML + options;

var newElement = '<div class="juan"><div class="form-group"><label>Producto</label><select class="form-control select2 producto" name="producto[]" id="producto" required>' + options + '</select></div><div class="form-group"><label>Cantidad</label><input type="number" name="cantidad[]" class="form-control" value=""/></div><div class="form-group"><label for="nombre">Nº albarán proveedor</label><input type="text" class="form-control" id="albaran_proveedor" name="albaran_proveedor[]" placeholder="El número de albarán del proveedor..."></div><div class="form-group"><label for="precio">Precio</label><input type="number" class="form-control" id="precio" name="precio[]" placeholder="Precio...(Solo números y punto para decimales) "></div><div class="form-group"><label>Fecha recepción:</label><div class="input-group"><div class="input-group-addon"><i class="fa fa-calendar"></i></div><input type="text" id="fecha_recepcion" name="fecha_recepcion[]" class="form-control" data-mask></div><br><a href="javascript:void(0);" class="remove_button btn btn-warning">Quitar producto</a></div>';
$( ".field_wrapper" ).append( $(newElement) );
$('.select2').select2();


 
});
$(".field_wrapper").on('click', '.remove_button', function(e){
        e.preventDefault();
        $('div.juan:last-child > div.form-group').remove();
});

Answer 1

您要删除div.form-group内的div.juan ，而不是div.juan本身。因此，它仍然是最后一个孩子，随后尝试删除它只是不会删除任何内容（因为它已被删除）。

您可能想要：

$('div.juan:last-child').remove();

也就是说，如果div.juan也是其容器中的最后一个子项，则只会删除它（可能是您的情况）。如果您的意思是最后一个div.juan，则需要jQuery的:last选择器扩展名或其last方法：

$('div.juan:last').remove();
// or
$('div.juan').last().remove();

在一条评论中，您说过您希望能够删除任何输入，即使它不是最后一个输入也是如此。仔细查看字符串中的HTML，我发现您在每个输入的结构中都放置了.remove_button。通过使用closest查找其中的div.juan，然后删除该按钮，可以轻松删除与该特定按钮关联的结构：

$(".field_wrapper").on('click', '.remove_button', function(e){
    e.preventDefault();
    $(this).closest("div.juan").remove(); // <===============
});

为什么只删除一个项目？是否可以删除所选项目？

1 个答案: