Как удалять записи из html таблицы, созданную динамически (js)?

Question

[good_beginer]

$.each(data, function (index, value) {
                            $('#tab').append("<tr class='text-left'>");
                            $('#tab').append("<td style='padding: 10px;'>" + value['id'] + "</td>");
                            $('#tab').append("<td style='padding: 10px;'>" + value['data'] + "</td>");
                            $('#tab').append("<td style='padding: 10px;'>" + value['text'] + "</td>");
                            $('#tab').append("<td class='padding'><button  data-index='"+index+"' data-id='"+value['id']+"'>X</button></td>");
                            $('#tab').append("</tr>");
                        });

не работает ни в какую,
ни так
document.getElementById("tab").deleteRow(2);
ни так
$('tr').eq(0).remove();
Думаю проблема в том что у таблицы как таковой , нет
html кода, ведь то чт написанно на html удаляется.
Как можно по другому?

Comments

[Евгений]

Вы по клику удаляете или как?
P.S.: On

[good_beginer]

Евгений, да

[Евгений]

good_beginer, используйте on

[good_beginer]

Евгений, обработчик работает, тут вроде другое

$('.delRow').on('click', function () {
                            let row = $(this).attr('data-index');
                            let data = $(this).attr('data-id');

                                    $('#tab').find('tr').eq(0).hide();
                                    //delete row from table
                        });

ведь если засунуть алерт и вывести построчно, row или data, выводиться правитьно но сам ряд из таблицы не удаляется (хоть его index определяется ).... может быть проблема в том что у меня таблица есть, а сам each создаёт в tbody который сам по себе пустой?

[Евгений]

good_beginer, можете в песочницу вывести всё?

[good_beginer]

Евгений, CODEPEN( только я переделал немного, всё это дело выполняется через ajax и событие по удалению создаётся после создания таблицы)

[Евгений]

good_beginer, так?

[good_beginer]

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

Answer 1

[Anton Nikonorov]

Сделайте обработчик типа такого:

$('body').on('click', 'element', function(events){
	$('#tab').find('tr').eq(0).remove();
});

Answer 2

[ThunderCat]

да че там такого то?
по клику на кнопку удаляем строку

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

PS: У вас не работает так как хтмл таблицы строится неправильно, поправьте метод создания строк таблицы.

Answer 3

[FeST1VaL]

Если я правильно понял

1. Как вариант...
у вас же id уникальные? так добавьте еще атрибут id

Вместо
$('#tab').append("<tr class='text-left'>");

Это:

$('#tab').append("<tr class='text-left' id='item-'+value['id']+'>");

и удаляйте уже по полученному data-id... т.е (в идеале кнопке дать class)

$(document).on('click', 'button', function() {
 var id = $(this).attr('data-id');
 $('#item-'+id).remove();
});

ИЛИ

2. Вариант
jsfiddle.net/fest1val/8b90rjxn

$(document).on('click', 'button', function() {
 $(this).parent().parent().remove();
});

Answer 4

[Никита Мелихов]

Для начала поправьте добавление строк. Каждый .append() добавляет узел к дереву, а не HTML.

Что-то типа:

$('#row').append('
    <tr>\
        <td>column</td>\
        <td>column</td>\
        <td>column</td>\
    </td>'
);