erase from list using JSON reply, using jQuery

Question

I have this list of items, and I have a button at the bottom for deleting some of them according to their checkboxes. I also got a response from a jQuery get() with the elements that represent the new list. So, the rest need to be removed. This is how my list is built :

<table style="float:left;width:100%">
<tbody>
    <?php foreach ($items as $item): ?>
    <tr>
        <div>
            <td ?>;
                <input type="checkbox" name="item_<?php echo $item['NAME'];?>" value="<?php echo $item['ID'];?>" />
            </td>
        </div>
    </tr>
    <?php endforeach; ?>
</tbody>

I use the get() function and get the following reply in json.

[{"ID":"2","EMAIL":"[email protected]","DATETIME":"2011-12-12 03:20:01"},{"ID":"4","EMAIL":"[email protected]","DATETIME":"2011-10-09 01:15:22"}"]

All I want to do now is simply eliminate the correspoding where the input value (which is the json's ID) is NOT in the json reply.

Any ideas how to do this with jQuery ? Thanks !

Brad Christie · Accepted Answer · 2011-09-22 14:53:54Z

1

There are several different ways to do this. I kind of like going through your json response, flagging those that are confirmed, delete those unconfirmed, and remove the confirmed flag. e.g.

var json = [{'id':'2','email':... }];

// first, flag what we DO have
$.each(json,function(n,r){
  var $i = $(':input[value="' + r.ID + '"]');
  if ($i.length > 0){
    $i.addClass('ajax-confirmed');
  }
});
// delete what hasn't been flagged
$(':input:not(.ajax-confirmed)').each(function(m,r){
  var $row = $(r).closest('tr');
  $row.remove();
});
// then remove the flag (cleanup)
$(':input.ajax-confirmed').removeClass('ajax-confirmed');

Fiddle showing it in action: http://jsfiddle.net/v9paf/ (Or if you want to feel like you're deleting it... http://jsfiddle.net/v9paf/1/)

edited Sep 22, 2011 at 14:53

answered Sep 22, 2011 at 14:38

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

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

7 Comments

Brad Christie Over a year ago

PS, a <div> tag has no place being between a <tr> and a <td>--I think you need to reverse the <div>/<td> spots...

Ted Over a year ago

I have more elemnts inside that tr, (I simplified the table for readablility). I was trying to make these elements show one on top of the other, any suggestions ?

Ted Over a year ago

For some reason it is erasing all the rows.

Brad Christie Over a year ago

@Ted: Do you have a webpage up that I can see it on? Or can you paste what you have (maybe create your own fiddle?)

Ted Over a year ago

jsfiddle.net/9vYDe/1 This is actual code from the site. and it doesn't work on jsFiddle either

|

Collectives™ on Stack Overflow

erase from list using JSON reply, using jQuery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related