Javascript 按id动态删除输入

下面的代码允许我使用自动增量id添加输入

var nextinput = 1;

    function Addfields(){
    nextinput++;

 campo = '<div class="input-field col s6"><label for="producto'+nextinput+'"">Producto a buscar</label><input type="text"  autocomplete="off"  name="campo[]" onkeypress="productos()" id="producto'+nextinput+'"" class="autocomplete"></div><div class="input-field col s1">Opciones</label><div class="row"><a class="btn waves-effect waves-light red" id="remove" onclick="removeitem();"><i class="material-icons">delete</i></a></div>';

    $("#campos").append(campo);
  }

---

在您的代码中，输入字段和删除按钮位于单独的父级中。创建一个包装器div并为其指定一个类，例如，在下面的代码段中，包装器div带有class

container

。然后在delete函数调用中，找到最近的

div.container

&delete

删除它


var nextinput=1；
函数Addfields（）{
nextinput++；
让campo='Opcionesdelete'；
$（“#campos”）。追加（campo）；
}
功能删除项（elem）{
$（elem）.closest（'div.container'）.remove（）
}

添加
这里有几个问题需要解决


不要使用增量
id
属性。它们是反模式的。如果要将
标签
链接到
输入
，并且它们是同级，只需将
输入
放在
标签
内即可
添加更多字段时，您的
id=“remove”
元素将重复多次<代码>id

在DOM中必须是唯一的。改为使用类

不要在*事件属性上使用过时的

。改用不引人注目的事件处理程序。除了更好地分离关注点之外，这些关注点还可以让您通过
this
关键字直接访问引发事件的元素

使用委托事件处理程序侦听在动态创建的HTML元素上引发的事件

您需要将所有附加的HTML包装在一个div中，以便在单击

.remove

按钮时轻松删除该父项

说了这么多，试试这个：

$（'#添加'）。单击（函数（）{
让campo='Producto a buscar Opcionesdelete'；
$（“#campos”）。追加（campo）；
});
$（'campos'）。在（'keypress'，'input'，function（）上{
//产品。。。
}).on（'click'，'remove'，函数（e）{
e、 预防默认值（）；
如果（确认（“？删除？”）{
$（this）.closest（'.field group'）.remove（）；
}
});

添加字段
您需要
$（this）.closest（'.input field.col.s6'）.remove（）打开
removietem
功能


var nextinput=1；
函数Addfields（）{
nextinput++；
campo=‘Opciones’；
$（“#campos”）。追加（campo）；
}
函数removietem（）{
如果（确认（“？删除？”）{
$（this）.closest（'.input field.col.s6'）.remove（）；
}
}
$（“按钮”）。在（'click'，function（）上{
Addfields（）
});

单击“我”
，稍作修改，您就可以很好地继续您的原始想法了

修改此项：

campo = '<div class="input-field col s6">..

以及功能：

function removeitem(){
  if (confirm("¿delete?")) {
    $("#campos").closest('#campos').remove();
}

为此：

function removeitem(QId){
  if (confirm("¿delete?")) {
    $(QId).remove();
  }
}

因此，您可以根据脚本的意图删除单个成员
 
$（“#坎波斯”）。最近（“#坎波斯”）。删除（）
删除
#campos
div因为壁橱
#campos
本身就是它，第二个选择器中的一个必须是您的输入
id
，就其性质而言，id对于所有DOM元素都应该是唯一的。这意味着您可以使用类似于$（'#your_id'）.remove（）的东西；就这样。首先，它比使用.closest（）快，第二，你这里有错误，我有你的想法，兄弟，它正在工作，但不正确，我不能删除我想要的寄存器，algotrimh总是使用创建的最后一个寄存器，例如，如果我想删除第一个输入，它会删除最后一个，我想问题是关于自动生成的id，我能做些什么来解决它？我知道你的想法，兄弟，它正在工作，但不正确，我不能删除我想要的寄存器，algotrimh总是使用创建的最后一个寄存器，例如，如果我要删除第一个输入，它会删除最后一个，我想问题是关于自动生成的id，我能做些什么来解决它呢？看看我的答案。您需要在代码周围包装一个带有ID的块，并将ID添加到removeitem函数中，这样，您就可以将单个项作为目标，而不仅仅是删除堆栈中的最后一个项—按堆栈外的顺序。
delete</i></a></div>' + "div";

.. id="remove' + nextinput + '" onclick="removeitem(' + "'#iproducto" + nextinput + "'" + ')"

function removeitem(){
  if (confirm("¿delete?")) {
    $("#campos").closest('#campos').remove();
}

function removeitem(QId){
  if (confirm("¿delete?")) {
    $(QId).remove();
  }
}