CODEWITHSUNDEEP
jquery
Behseini
Behseini

Reputation: 6320

How to Remove Checked Table Row Using jQuery

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

Upvotes: 1

Views: 13452

Answers (4)

hug
hug

Reputation: 1218

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.

Upvotes: 0

Learner
Learner

Reputation: 221

you should remove all the input 

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

Use:

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

Working Fiddle

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 5

Related Questions