NaN
NaN

Reputation: 1306

How to remove nodes of HTML

I'm not sure if I'm doing this as well as it can be done and if anyone has a better way, please let me know.

I have a table of data that's pushed onto a page with AJAX. The user has the option of deleting these data. If there are no more data to delete, I want the row to be removed from the list.

I'm not sure how, and would like to know if I can remove a row of data with no id attached to the row itself.

Here is what one of the table rows of data looks like

<tr>
  <td data-pid="2"><a data-pid="2" href="#">test</a></td>
  <td><a data-pid="2" class="manage-icon" href="#"><img alt="" src="delete.png"></a></td>
</tr>

This is what I'm using to get the id
$(this).attr('data-pid');

Upvotes: 0

Views: 89

Answers (2)

Try

$('a[data-pid="' + pid + '"]').closest('tr').remove();

.closest()

use

$(this).data('pid');

instead of

$(this).attr('data-pid');

.data()

.parents() for all matching ancestor elements.

closest() for the first closest matching element (either an ancestor or self).

.closest() is better and faster in your case

Upvotes: 1

OneOfOne
OneOfOne

Reputation: 99224

You want to remove that tr?

$(function() {
    $('img').click(function() {
        var a = $(this).parent();
        if(confirm('Delete?')) {
            var pid = a.data('pid');
            //do ajax remove;
            a.parents('tr').remove();
        }
    });
});

Upvotes: 0

Related Questions