Question

我的代码如下：

<script> 

$(document).ready(function() { 

    var tagCounter=0; 

    $("#tag-add-button").click(function() { 
     var text = $("#tagadd").val(); 
     $("#set-tags").append("<input type='text' id='tag"+tagCounter+"' READONLY>"); 
     $("#tag"+tagCounter).val(text); 
     $("#tagadd").val(""); 
     tagCounter++; 
    }); 


}); 
</script> 

这将执行以下操作：

当点击tagadd按钮，它需要从输入框（tagadd）的文本，并把它在一个新的输入框那附加到set-tags div。 tagadd输入框会变成空白。

我遇到的问题是，我希望每个输入框都有自己的删除按钮。但我不明白如何可以生成的javascript，可以有无限数量的输入框...

任何想法？

Answer 1

将输入元素放入div或span范围内的，并使remove按钮成为输入元素的同级。然后，在按钮的onclick处理程序，只是像做$(this).parent().remove()

这具有消除两个输入元素，以及删除按钮本身

Answer 2

而不是使用一个ID（#tag-add-button），使用类的效果然后使用jQuery的each function并遍历到适当的元素。

Answer 3

$(document).ready(function() { 

    var tagCounter=0; 

    $("#tag-add-button").click(function() { 
     var text = $("#tagadd").val(); 
     $("#set-tags").append('<input type="text" id="tag'+tagCounter+'" READONLY /><span class="remove">Remove</span>'); 
     $("#tag"+tagCounter).val(text); 
     $("#tagadd").val(""); 
     tagCounter++; 
    }); 

    $('span.remove').bind('click',function(){ 
     $(this).prev('input').andSelf().remove(); 
    }); 


});