Как правильно удалять строки из таблицы?

Question

[Николай Бараненко]

Хочу сделать кнопку в таблице, с помощью которой я мог бы удалять и добавлять строки в таблице, с добавлением я кое-как разобрался, а вот с удалением проблема.

<table id="myTable">
    <thead>
    <tr>
        <th>Какое-то контекст</th>
        <th>Какие-то кнопки</th>
    </tr>
    </thead>
    <tr>
        <td>Row1 cell1</td>
        <td><a class="btn btn-warning" href="javascript:deleteRow(this);"><i class="icon-remove"></i></a></td>
    </tr>
    <tr>
        <td>Row1 cell2</td>
        <td><a class="btn btn-warning" href="javascript:deleteRow(this);"><i class="icon-remove"></i></a></td>
    </tr>
</table>

Нашел 2 варианта.

Первый, который по идее должен определять индекс строки в которой была нажата кнопка Del и через передачу this
должна происходить передача инфо об объекте, в котором мы вычисляем rowIndex:

function deleteRow(btn) {
        // var i = r.parentNode.parentNode.rowIndex;
        // document.getElementById("myTable").deleteRow(i);
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }

Но проблема в том, что браузер возвращает ошибку:

main:371 Uncaught TypeError: Cannot read property 'parentNode' of undefined
    at deleteRow (main:371)
    at <anonymous>:1:1

Нашел другой вариант:

$('body').on('click', 'btn btn-warning', function() {
        $(this).parents('tr').remove();
    });

Но проблема в том, что при нажатии удаляется полностью все строки, которые я предварительно добавляю с помощью

function myFunction() {
        var table = document.getElementById("myTable");
        var totalRowCount = table.rows.length;
        console.log("Всего строк: "+totalRowCount);
        var row = table.insertRow(totalRowCount);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = "Новая строчка "+totalRowCount;
        cell2.innerHTML = "<a class=\"btn btn-warning\" href=\"\"><i class=\"icon-remove\"></i></a>";
    }

Как правильно удалять строки в таблице?

Comments

[Ankhena]

Неверный селектор

'btn btn-warning'

Во-первых, забыли точки у классов.
Во-вторых, лишний либо пробел либо btn, потому что элемента с классом btn-warning внутри элемента с классом btn не существует. Это один элемент.

И я бы заменила гармошку из parentNode'ов на closest.

В таком духе https://jsfiddle.net/02scx5ay/

Answer 1

[0xD34F]

href="javascript:deleteRow(this);"

Замените на onclick="deleteRow(this)".

Или, просто уберите, и сделайте делегированный обработчик клика:

document.querySelector('table').addEventListener('click', e => {
  const btn = e.target.closest('.btn');
  if (btn) {
    btn.closest('tr').remove();
  }
});

нашел другой вариант

$('body').on('click', 'btn btn-warning', function() {
        $(this).parents('tr').remove();
    });

НО проблема в том, что при нажатии удаляется полностью все строки, которые...

Это не "вариант", а неработоспособный мусор - где точки перед именами классов?

Что до удаления строк - этого не происходит. А вот страница перезагружается. Потому что href у ссылки пустой и не отменяете действие по умолчанию при клике. Надо так:

$('body').on('click', '.btn.btn-warning', function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
});

Или, вместо пустой строки записывайте # ссылкам в href.

Answer 2

[tempick]

$('body').on('click', 'a.btn-warning', function() {
    $(this).parent('td').parent('tr').remove();
});

Answer 3

[Радость моя]

$(document).on('click', '.btn-warning', function() {
    $(this).closest('tr').remove();
});