使用jquery刪除動態創建的文本框

Question

我正在按鈕單擊動態創建文本框。我想知道用另一個按鈕點擊刪除文本框。

HTML

<table class="table-fill tbfill"> 
    <thead> 
     <tr> 
     <th class="text-left" runat="server">Screen Name</th> 
     <th class="text-left" runat="server">Seats Available</th> 
     <th class="text-left"></th> 
     </tr> 
    </thead> 
    </table> 
<input id="btnAdd" type="button" value="ADD"/> 

jQuery的

$("#btnAdd").bind("click", function() 
     { 
     $("tbody.addScreen").append('<tr id="row0">' + 
      '<td class="text-left" name="screenName"> <input id="screenNameTextBox"/> </td>' + 
      '<td class="text-left"> <input id="seatsAvlTextBox" name="seatsAvl" /> </td>' + 
      '<td class="text-left"> <input type="button" value="Remove" id=Removebtn/> </td>' + 
      '</tr>'); 
     }); 

我在這裏有一個刪除按鈕。當我點擊按鈕時，我需要從相應的行中刪除文本框。我怎樣才能做到這一點？

Answer 1

你會有很多項目有相同的ID Removebtn,row0, screenNameTextBox等這是不正確的。改用類。

變化

<input type="button" value="Remove" id=Removebtn/> 

等id s到類似的類：

<input type="button" value="Remove" class="RemoveBtn"/> 

然後，你就可以使用事件委託指定的處理程序對所有這些按鈕。例如，此代碼將刪除按鈕單擊上的整行：

$(document).on('click', '.RemoveBtn', function() { 
    $(this).closest('tr').remove(); 
}); 

這是working JSFiddle demo。

如果你想只刪除文本框，然後使用：

$(document).on('click', '.RemoveBtn', function() { 
    $(this).closest('tr').find('input[type="text"]').remove(); 
}); 

Answer 2

你可以像下面。希望這會幫助你。

$('.tbfill').on('click', '#RemoveBtn', function() { 
    $(this).closest('tr').find('input').remove();   
}) 

如果要刪除完整行，請使用$(this).closest('tr').remove()。

Answer 3

如果你只想刪除文本框

$(document).on('click', '.RemoveBtn', function() { 
    $(this).closest('tr').find("input:text").remove(); 
});