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(); 
    }); 


});