Question

我正在使用此代码添加和删除输入字段：http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery

我面临的两个问题是我无法解决的问题：

$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>');

我想在div中追加一个div（我正在使用bootstrap）：

$(wrapper).append('<div class="form-group"><input type="text" class="form-control" "name="mytext[]" placeholder="test"><div class="input-group"><span class="input-group-addon"><span class="wb-close"></span></span></div></div>');

显然，这很有效，但是我的近距离功能不再起作用，因为它试图关闭第二个div，而不是＆＃34; main＆＃34; div（<div class="form-group">。如何在上面的示例中关闭整个添加的div？

第二个问题，我使用以下作为我的关闭函数：

<div class="input-group"><span class="input-group-addon"><span class="wb-close"></span></span></div>

但关闭按钮不适用于范围图标wb-close，它只是不会关闭。我尝试将remove_field类添加到跨度本身，但这也没有用。

Answer 1

您需要更改选择器，因为您更改了类名。

试试这个：

$(wrapper).on("click", ".wb-close", function(e) {
    $(this).parent('.form-group').remove(); x--;
});

或者：

$(wrapper).on("click", ".wb-close", function(e) {
    $(this).parent().parent().parent().remove(); x--;
});

Answer 2

Try this

$(function(){
$("#btn-add").click(function(){
  $("#wrapper").append('<div><input type="text" name="mytext[]"/><a href="#"              class="remove_field">Remove</a></div>');
      $("#wrapper").find("a").unbind("click");
     $("#wrapper").find("a").click(function(){
       $(this).parent().remove();      
     });      
  });
});


 <button id="btn-add">Add </button>
<div id="wrapper"></div>

jQuery动态输入字段

2 个答案: