时间戳

首页 > 解决方案 > 为什么你只删除一个项目？是否可以删除所选项目？

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

问题描述

我有一个通过“追加”向表单添加输入的功能，我还有另一个按钮可以删除输入的输入。为此，我使用“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();
});

标签： javascriptjqueryhtml

解决方案

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

你可能想要：

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

也就是说，它只会删除div.juan如果它也是其容器中的最后一个孩子（它可能会在你的情况下）。如果你的意思是 last 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(); // <===============
});

推荐阅读