Question

下面有这段代码，允许我添加具有自动递增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);
  }

我想构建一个允许我通过id删除输入的函数，我已经尝试过此操作，但是删除了所有内容并且不允许我添加更多字段，请寻求帮助

     function removeitem(){

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

Answer 1

在您的代码中，输入字段和删除按钮位于单独的父对象内。创建一个包装器div并为其提供一个类，例如，在包装器div下方的片段中，类为container。然后在删除函数调用中找到closest div.container并删除remove

var nextinput = 1;

function Addfields() {
  nextinput++;

  let campo = '<div class="container"><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(this);"><i class="material-icons">delete</i></a></div></div>';

  $("#campos").append(campo);
}

function removeitem(elem) {
  $(elem).closest('div.container').remove()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="campos"></div>
<button onclick='Addfields()'>Add</button>

Answer 2

这里有几个问题要解决。

请勿使用增量id属性。他们是反模式。如果您想将label链接到input并且他们是兄弟姐妹，只需将input 放入 label。
随着添加更多字段，您的id="remove"元素将被重复多次。 id 必须在DOM中必须唯一。改用类。
请勿使用过时的on*事件属性。改用不显眼的事件处理程序。除了可以更好地分离关注点之外，这些好处还可以让您直接访问通过this关键字引发事件的元素。
使用委托事件处理程序来侦听在动态创建的HTML元素上引发的事件。
您需要将所有附加的HTML包装在div中，以便在单击.remove按钮时轻松删除该父对象。

话虽如此，请尝试以下操作：

$('#add').click(function() {
  let campo = '<div class="field-group"><div class="input-field col s6"><label>Producto a buscar <input type="text" autocomplete="off" name="campo[]" class="autocomplete"></label></div><div class="input-field col s1">Opciones</label><div class="row"><a class="btn waves-effect waves-light red remove"><i class="material-icons">delete</i></a></div></div>';
  $("#campos").append(campo);
});

$('#campos').on('keypress', 'input', function() {
  // productos...
}).on('click', '.remove', function(e) {
  e.preventDefault();
  if (confirm("¿delete?")) {
    $(this).closest('.field-group').remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campos"></div>

<button id="add">Add fields</button>

Answer 3

您需要在$(this).closest('.input-field.col.s6').remove();函数上使用removeitem。

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();" href="javascript:void(0)"><i class="material-icons">delete</i></a></div>';

    $("#campos").append(campo);
  }

     function removeitem(){

  if (confirm("¿delete?")) {
   $(this).closest('.input-field.col.s6').remove();
  }
  }
  
  $("button").on('click', function(){
   Addfields()
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="campos"></div>
<button>Click Me</button>

Answer 4

进行一些修改后，您应该可以使用原始想法。

修改此：

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

为此包装了一个容器：

campo = '<div id="iproducto' + nextinput + '">' + '<div class="input-field col s6">..

最后加上一个“”：

delete</i></a></div>' + "div";

和removeitem的调用：

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

函数：

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

对此：

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

因此，您可以按照脚本的意图删除单个成员。

通过ID动态删除输入

4 个答案: