Question

我编写了这段代码用于创建新的输入字段，我需要以某种方式修改它，以便我可以删除字段。我试着将var计数器添加到mySpan，然后我创建$(#removeBox).click(function()，然后我可以得到我需要删除的输入字段的id。但是我不能让span可点击，当我尝试这样做时<a class="deleteBox' + counter'"><span class="glyphicon glyphicon-remove"></span></a>它说我错过了)。我知道这个问题有一些解决方案，但我想让我的工作。

 var counter = 2;
    $("#addTextField").click(function() { 
        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'textboxdiv'+counter);
        newTextBoxDiv.after().html('<input type="text" name="textbox' + counter + '" placeholder="Category" /><span id="mySpan" class="glyphicon glyphicon-remove"></span>');
        newTextBoxDiv.appendTo("#textboxgroup");
        counter++;

    });

Answer 1

尝试这样：诀窍是删除您点击的元素，您可以通过点击内的$(this)获得该元素

    var counter = 0;
    $("#addTextField").on('click', function() { 
            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'textboxdiv'+counter);
            newTextBoxDiv.after().html('<div class="wrapper">' + counter + '<input type="text" name="textbox' + counter + '" placeholder="Category" /><span class="glyphicon glyphicon-remove">remove</span></div>');
            newTextBoxDiv.appendTo("#textboxgroup");
            counter++;
    
        });
        
    $('body').on('click', '.glyphicon-remove', function(){
    	$(this).closest('.wrapper').remove();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addTextField">click to add</div>
    
    <div id="textboxgroup"></div>

在您的代码中，您在每次点击时添加了一个ID <span id="mySpan"，这是不好的，因为ID应始终是唯一的。因此，如果您不止一次添加它，它就不再是唯一的了。更好地使用类......

Answer 2

试试这个：

＆＃13;

var counter = 0;
$('#add').click(function() {

  $('#target').append('<span>New Input: <input type="text"><button id="remove' + counter + '">Remove</button><br></span>');

  $('#remove' + counter).click(function() {

    $(this).parent().html('');
    counter--;
  });
  counter++;
});

＆＃13;

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

＆＃13;

删除带有span的输入字段

2 个答案: