How to Remove Checked Table Row Using jQuery

Question

I am trying to remove table rows which it checkbox has been checked. Here is the code I can add rows to table but I do not know how to remove only checked one.

$( document ).ready(function() {
  $("#add").on("click",function(){
  $('table').append('<tr> <td><input type="checkbox" name="vehicle" value="Bike"></td><td>Color Option : <input type="color" name="favcolor"></td><td>Item ID: <input type="text" name="firstname"></td> </tr>');
});
});

Can you please take a look at This Demo and let me know how to remove only checked row

Arun P Johny · Accepted Answer · 2014-02-02 07:31:08Z

5

There is an trailing space in the ID of remove button remove it

<button id="remove" type="button">Reomve Selected Color</button>

then add a click handler and use .has() to find rows with checked checkboxes

$("#remove").on("click", function () {
    $('table tr').has('input[name="vehicle"]:checked').remove()
})

Demo: Fiddle

answered Feb 2, 2014 at 7:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Milind Anantwar · Accepted Answer · 2014-02-02 07:33:08Z

2

Use:

  $("#remove").on("click",function(){
     $('input:checked').each(function() {
     $(this).closest('tr').remove();
      });
 });

Working Fiddle

answered Feb 2, 2014 at 7:33

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Learner · Accepted Answer · 2014-02-02 07:35:02Z

0

you should remove all the input

$("tr input[type='chekbox']:cheked").remove()

answered Feb 2, 2014 at 7:35

Learner

2212 silver badges11 bronze badges

1 Comment

David Thomas Over a year ago

That would leave the tr though, explicitly not what the OP wants; also both typos will stop the selector matching any elements.

hug · Accepted Answer · 2015-02-09 12:35:00Z

Remove Row

HTML for button (change 'myTable' for your actual table ID)

<input id="removeRowBtn" onclick="deleteRow('myTable')" value="Remove selected row" name="removeRowBtn" type="button">

Javascript (with an extra fadeOut effect)

var deleteRow = function(tableID) {
    var ID = "#" + tableID;
    var rowCount = jQuery(ID + " tbody tr").length;

    jQuery(ID + " input:checked").each(function() {

        if (rowCount > 1)
        {
            jQuery(this).closest('tr').fadeOut(function () { 
                jQuery(this).remove();
            });
            rowCount--;
        }
        else
            alert("Cannot remove all rows.");
    });

    return false;
}

Add/duplicate Row (extra, not an answer)

HTML for button (change 'myTable' for your actual table ID)

<input id="addRowBtn" onclick="addRow('myTable')" value="Add row" name="addRowBtn" type="button">

Javascript (duplicates first row, with an fadeIn effect)

var addRow = function(tableID) {
    var ID = "#" + tableID;
    var rowCount = jQuery(ID + " tbody tr").length;
    if (rowCount < 5) { // limit the user from creating more rows
        jQuery(ID + " tbody tr:first").clone().appendTo(ID).hide().fadeIn();
    } else {
        alert("Cannot add more than 5 rows.");
    }
    return false;
}

Note: I use jQuery instead of $ because of possible conflicts. The code assumes your rows are within a tbody as well, to follow HTML5 standards and to avoid possible conflicts with a thead or tfoot. I also know it might be cleaner to use click event instead of html attribute onclick, but this has it's pros as well. Might help someone at least.

Collectives™ on Stack Overflow

How to Remove Checked Table Row Using jQuery

4 Answers 4

Comments

Comments

1 Comment

Remove Row

Add/duplicate Row (extra, not an answer)

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Remove Row

Add/duplicate Row (extra, not an answer)

Comments

Your Answer

Sign up or log in

Post as a guest

Related