Блог

Главная - Вопросы по программированию - Таблица jQuery / кнопка удаления

Таблица jQuery / кнопка удаления

#jquery #button #html-table

#jquery #кнопка #html-таблица

Вопрос:

У меня есть таблица с 4 столбцами, где в одном из этих столбцов есть кнопка. Я бы хотел, чтобы при нажатии кнопки строка таблицы, в которой кнопка должна быть исключена, была удалена.

Поскольку строки таблицы вставляются динамически при нажатии другой кнопки, при этом идентификаторы кнопок являются динамическими, что не позволяет мне использовать идентификатор кнопки, которая находится в таблице, в качестве селектора.

Тогда я бы сделал следующее: При нажатии кнопки я хочу выяснить, в какой строке таблицы находится кнопка, а затем удалить эту строку.

Есть предложения?

Ниже таблица, с которой я манипулирую.

 <table id="tbIngredients">
     <thead>
          <tr>
              <th id="cod"> Code </ th>
              <th id="desc"> Description </ th>
              <th id="price"> Price </ th>
              <th id="op"> Operation </ th>
          </ tr>
     </ thead>
     <tbody>
          <tr>
             <td id="tr1"> 1 </ td>
             <td> Ingredient </ td>
             <td> $ 1.00 </ td>
             <td id="td1"> <input type="button" class="delIngredient" value="Excluir     ingrediente"> </ td>
         </ tr>
         <tr id="tr16">
             <td> 16 </ td>
             <td> Papaya </ td>
             <td> £ 01.05 </ td>
             <td id="td16"> <input type="button" class="delIngredient" value="Excluir ingrediente"> </ td>
         </ tr>
     </ tbody>
</ table>

Ответ №1:

Как насчет,

 $('.delIngredient').click(function(){
  $(this).parents('tr').remove();
});

Пропустил динамику, если вы также добавляете строки после загрузки страницы, вам нужно будет прикрепить ее к документу,

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

Ответ №2:

 $('.delIngredient').click(function() {
    $(this).parent().parent().remove();
});

Приведет к удалению родительской строки. Возможно, это не единственный способ, но он работает для вашей разметки.

Я думаю, что мне больше нравится решение Эндрюса. Тогда это не зависит от вложенности.

Ответ №3:

Попробуйте это:

 $("#tbIngredients").on("click", ".delIngredient", function() {
    $(this).closest("tr").remove();
});

ДЕМОНСТРАЦИЯ