Добавить и удалить ячейки из строк клонированных таблиц

Question

Я пытаюсь создать таблицу, из которой я могу добавлять и удалять строки по мере необходимости.Сама таблица создается на лету с помощью PHP, и я не знаю, сколько ячеек будет в каждой строке таблицы.До сих пор мне удавалось успешно добавлять строки, но я не мог понять, как удалить конкретную строку, когда нажата «X».

Я полагаю, если смогу передать число в «удалить»функция, с помощью которой можно определить, какую строку удалить.Я пытался удалить последний «td» из клонированных данных и заменить его «td», который содержит правильный аргумент функции.

Ничего из того, что я пробовал, до сих пор не работало.Есть предложения?

HTML

<table class='group'>
  <tr class='group_row_0'>
    <td>Thing 1</td>
    <td>Thing 2</td>
    <td>Thing 3</td>
    <td>Thing 4</td>
    <td>
      <a href='#' class='group_remove' onclick='javascript:removeGroupField(0);'>X</a> <!-- The "0" here needs to be replaced with the new row # -->
    </td>
  </tr>
</table>

<a href='#' class='group_add' onclick='javascript:addGroupField();'>+ Add Row</a>

Javascript:

var row_index = 1;

function addGroupField(){
  var last_row = row_index-1;

  var rowData = $('.group_row_'+last_row).clone();
  rowData.attr('class','group_row_'+row_index);

  $('.group').append(rowData);

  row_index++;
}

Answer 1

Кажется, что вы используете какой-то jQuery, поэтому вы можете попробовать это для х.(это конкретный элемент класса group_remove).Затем этот элемент и все, что находится внутри него, удаляется.

Answer 2

Вы должны попытаться правильно подключить ваши обработчики с Javascript, а не с встроенными обработчиками.Просто добавьте один обработчик в таблицу, и когда нажмете X, удалите строку, перемещаясь вверх от нажатой кнопки к tr, чтобы удалить:

$('table.group').on('click', '.group_remove', function() {
  const tr = this.parentElement.parentElement;
  tr.remove();
});
$('.add').on('click', function (){
  const cloned = $('.group tr:last-child').clone();
  $('.group').append(cloned);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='group'>
  <tr class='group_row_0'>
    <td>Thing 1</td>
    <td>Thing 2</td>
    <td>Thing 3</td>
    <td>Thing 4</td>
    <td>
      <a href='#' class='group_remove'>X</a>
    </td>
  </tr>
    <tr class='group_row_1'>
    <td>Thing 1</td>
    <td>Thing 2</td>
    <td>Thing 3</td>
    <td>Thing 4</td>
    <td>
      <a href='#' class='group_remove'>X</a>
    </td>
  </tr>
    <tr class='group_row_2'>
    <td>Thing 1</td>
    <td>Thing 2</td>
    <td>Thing 3</td>
    <td>Thing 4</td>
    <td>
      <a href='#' class='group_remove'>X</a>
    </td>
  </tr>
    <tr class='group_row_3'>
    <td>Thing 1</td>
    <td>Thing 2</td>
    <td>Thing 3</td>
    <td>Thing 4</td>
    <td>
      <a href='#' class='group_remove'>X</a>
    </td>
  </tr>
</table>

<div class="add">add row</div>