Добавление / удаление столбцов для фиксированного количества строк в jquery

Question

Привет, ребята, я пытаюсь добавить / удалить столбцы в фиксированном количестве строк: таблица на картинке

Мне удалось клонировать столбец, но возникли проблемы с их удалением. Вот результат .

Вот отрывок того, что я пытался сделать:

$(document).ready(function() {
  $('#addColumn').click(function(e) {
    // e.preventDefault();
    // $(this).before("<input name='file[]' type='file' />");
    for (let index = 0; index < 7; index++) {
      // const element = array[index];
      if (index == 0) {
        $("#tblSample tr").eq(index).append('<td>Detail <button type="button" id="removeColumn">-</button></td>');
      } else {
        $("#tblSample tr").eq(index).append('<td><input type="text"></td>');
      }
    }
  });

  $('#tblSample thead').on('click', '#removeColumn', function(event) {
    for (let index = 0; index < 7; index++) {
      // const element = array[index];
      $('#tblSample tr').eq(index).closest('td').remove();
    }

  });

});

<

Answer 1

Я немного изменил вашу функцию добавления столбца. Я добавил атрибут для номера столбца в кнопку удаления столбца. Также вместо применения id = 'removeColumn' я применил class = 'removeColumn' к кнопкам, чтобы избежать дублирования идентификаторов.

            $('#addColumn').click(function(e) {                    
                var num = 0;
                num = $($('#tblSample tbody tr')[0]).find('td').length;

              // e.preventDefault();
              // $(this).before("<input name='file[]' type='file' />");
              for (let index = 0; index < 7; index++) {
                // const element = array[index];
                if (index == 0) {
                  $("#tblSample tr").eq(index).append('<th>Detail '+num+' <button type="button" data-col="'+num+'" title="remove this column" class="removeColumn">-</button></th>');
                } else {
                  $("#tblSample tr").eq(index).append('<td><input type="text"></td>');
                }
              }
            });

            $('#tblSample thead').on('click', '.removeColumn', function(event) {
                console.log($(this).attr("data-col"));
                var colNum = $(this).attr("data-col");
                $("#tblSample thead tr").each(function() {
                    $(this).find("th:eq("+colNum+")").remove();
                });                    
                $("#tblSample tbody tr").each(function() {
                    $(this).find("td:eq("+colNum+")").remove();
                });
            });