使用 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/>

和其他 ids 相似类:

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

使用 jquery 删除动态创建的文本框

Remove dynamically created textboxes using jquery

html

jquery

textbox