Удалить динамически созданные текстовые поля с помощью 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>'); 
     }); 

У меня есть кнопка Remove здесь. Когда я нажимаю кнопку, мне нужно удалить текстовые поля из соответствующей строки. Как я могу это сделать?

Answer 1

У вас будет много предметов с одинаковыми идентификаторами 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(); 
});