jquery remove row in table with checkbox value

Question

There are several posts on this but I can't seem to find the right combination for my case. I submit a form with AJAX using jquery:

<form id="deleteform" name="myform" action="">
<table id="webcam-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>...</th>
            <th><input type="checkbox" name="checkboxselectall" title="Select All" />&nbsp;&nbsp;
                <button type="submit" class="deletebutton" name="delete_video" title="Delete the selected videos">Delete</button></th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>some data</td>
            ...
            <td><input type="checkbox" value="<?php echo $this->result_videos[$i]["video_name"]; ?>" title="Mark this video for deletion"/></td>
        </tr>
    </tbody>
</table>
</form>

I need to select the table row where a checkbox has been selected and remove that.

var checked = jQuery('input:checkbox:checked').map(function () {
    return this.value;
}).get();
var $this = jQuery(this);
jQuery.ajax({
    type: 'POST',
    url: 'index.php?option=com_recordings&task=deletevideos&format=raw',
    data: {checkedarray:checked},
    success: function(data){
        jQuery('#deleteform input:checkbox').each(function(){
            if(this.checked){
                $this.parents("tr").remove();
            }
        });
    }
});

I've tried parents as above and closest but that removes the wrong row. Plus it's only selecting the one row instead of the multiple rows that may be selected with a checkbox.

Sudhir Bastakoti · Accepted Answer · 2013-01-15 03:42:54Z

13

try:

jQuery('input:checkbox:checked').parents("tr").remove();

Demo: jsFiddle Example

answered Jan 15, 2013 at 3:42

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Pietrosanti Over a year ago

I don't know which is better performance-wise, but this code is cleaner.

Tom Pietrosanti · Accepted Answer · 2013-01-15 03:41:30Z

2

jQuery('#deleteform input[type="checkbox"]:checked').parent().parent().remove()

First parent() is the td Second is the tr

Here's a fiddle to demonstrate: http://jsfiddle.net/C2WMS/

answered Jan 15, 2013 at 3:41

Tom Pietrosanti

4,3042 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

jquery remove row in table with checkbox value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related