Question

这是我的代码。在该代码中，remove函数仅在一个输入框上起作用，但是我希望它在通过append函数创建的每个输入框上起作用。

    <script>
       $(document).ready(function(){




            var one=1;

            $("#add").click(function(){
                one++;
               $("#form_value").append("<div id=\"man"+one+"\"><br><input type=\"text\" placeholder=\"Product\"name=\"product["+one+"]\"><div class=\"w3-col l4\"> <input type=\"text\" placeholder=\"Product description\"></div><button type=\"button\" id=\"rem"+one+"\">Remove</button></div>");


                 $("#rem"+one+"").click(function(){


                $("#man"+one+"").remove();

            });  

            });





        });
    </script>

Answer 1

之所以会发生这种情况，是因为每次您单击添加按钮时one的值都会增加，而这是remove事件中使用的值。

如果在删除事件中添加console.log(one)，则会看到one始终是最后一个数字。

一种更好的方法是将div / remove元素分配给jquery对象，然后将其删除。

例如

var one = 1;

$("#add").click(function() {
  one++;
  var $div = $("<div id='man" + one + "'></div>");
  
  $div.append("<br><input type=\"text\" placeholder=\"Product\"name=\"product[" + one + "]\"><div class=\"w3-col l4\"> <input type=\"text\" placeholder=\"Product description\"></div>");

  var $remove =
    $("<button type='button' id='rem" + one + "'>Remove</button>")
    .click(function() {
      $div.remove();
    });

  $("#form_value").append($div.append($remove));
});

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

如何通过jquery删除功能删除单个输入框？

1 个答案: