CODEWITHSUNDEEP
javascriptjquery
Sean Cunningham
Sean Cunningham

Reputation: 3116

Need to delete row if checkbox is checked

I've got a jQuery/AJAX solution set up to update and delete items that are displayed in a table. The AJAX part works fine but once an item is deleted I need to be able to remove it from view and I can't figure out how to identify the selected item(s) based on their value after the submit button is clicked.

Here's my jQuery:

$('#button').click(function(event){
    var order = $("#sortable tbody").sortable("serialize");
    order += "&" + $("form[name=favorites]").serialize().replace(/%5B%5D/g, '[]');
    order += "&crudtype=update_favorites";
    $('#savemessage').html('<p>Saving changes...</p>');
    $.post("/crud",order,function(theResponse){
        $('#savemessage').html(theResponse);
      });
  });
});

My HTML is generated from PHP so the quantities and IDs are variable but the format is as follows:

<tr class="odd" id="field_37">
  <td class="handle"><a href="#">Item #1 Name</a></td>
  <td><input type="checkbox" name="fid[]" id="fid" value="37" class="box check-child"></td>
</tr>
<tr class="even" id="field_29">
  <td class="handle"><a href="#">Item #2 Name</a></td>
  <td><input type="checkbox" name="fid[]" id="fid" value="29" class="box check-child"></td>
</tr>

So effectively what (I think) I need is to add to my .click function something like "foreach checked fid, remove the corresponding row ID" if that makes any sense.

Upvotes: 0

Views: 2831

Answers (2)

sravis
sravis

Reputation: 3680

You can do it like this: http://jsfiddle.net/dSANw/

When user clicks on checked box add class to the parent tr

$(".box").click(function() {
    if($(this).is(':checked')) {
        $(this).parents('tr').addClass('checkedtd');
    } else {
        $(this).parents('tr').removeClass('checkedtd');
    }

});

When clicked on delete, get all tables tr's classed 'checkedtd' and delete

$("#delt").click(function() {

    alert($('.checkedtd').length);
    $('.checkedtd').remove();


});

Upvotes: 0

epascarello
epascarello

Reputation: 207557

A basic selector to get a checked checkbox is

'input[type="checkbox"]:checked'

or

'input:checkbox:checked'

Now you can either use has() or loop through and use closest to get the trs

$('input[type="checkbox"]:checked').closest("tr").remove();

or

$('tr:has(input[type="checkbox"]:checked)').remove();

Upvotes: 1

Related Questions