ansaurus

Question

Answer 1

A:

$("tr.category a.delete").click(function(e){

  e.preventDefault();

  // find the row
  var $tr = $(this).parent("tr:first");

  // find the next row with class 'category'
  var $nextcategory = $tr.next("tr.category");

  // select next 'item' rows after next of the next 'category' row
  var $nextitemrows = $nextcategory.next('tr.category').nextAll('tr.item');

  // remove next 'item' rows before next of the next 'category' row
  $nextcategory.nextAll("tr.item").not( $nextitemrows ).remove();

  // remove next category
  $nextcategory.remove();
});


$("tr.item a.delete").click(function(e){

  e.preventDefault();

  // find the row & remove itself
  $(this).parent("tr:first").remove();
});

Anwar Chandra 2009-12-23 07:16:38

Answer 2

A:

Don't know what jQuery version you are using, or if you are testing with IE, but there is a bug with jQuery 1.3.2 using fadeIn/fadeOut that might be causing problems:

http://dev.jquery.com/ticket/4440

Don't know if that's the problem, but thought I'd mention it.

slolife 2009-12-23 07:48:10

Answer 3

+1 A:

Can you change the HTML at all?

The jQuery would be easier (and the HTML more descriptive) if the HTML used a <tbody> tag for each category, like this:

<table class="stats" width="100%">
    <tbody>
        <tr class="category">
            <th scope="rowgroup" colspan="2">Costumes<br /><small>Make your character look uniqe</small></th>
            <td width="80"><a href="#" class="delete" id="category:1">Delete</a><br />Invisible</td>
        </tr>
        <tr class="item">
            <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td>
            <td width="120">1000 Athen Coins<br />$1 Paypal</td>
            <td width="80"><a href="#" class="delete" id="item:1:1">Delete</a><br />Invisible</td>
        </tr>
        ...
    </tbody>
    <tbody>
        <tr class="category">
            <th scope="rowgroup" colspan="2">Costumes<br /><small>Make your character look uniqe</small></th>
            <td width="80"><a href="#" class="delete" id="category:2">Delete</a><br />Invisible</td>
        </tr>
        <tr class="item">
            <td>Godly Weapon<br /><small>Super wepons of gods</small><br /><small>images/godly_weapon.png</small></td>
            <td width="120">1000 Athen Coins<br />$1 Paypal</td>
            <td width="80"><a href="#" class="delete" id="item:2:1">Delete</a><br />Invisible</td>
        </tr>
        ...
    </tbody>
</table>

Then your jQuery could be re-written like this:

    <script type="text/javascript">                                         
            $(document).ready(function() {
                    $("tr.item .delete").click(function(){
                            $.post("do.php", { what: "delete", q: $(this).attr("id") });
                            $(this).parent().parent().fadeOut("fast");
                    });

                    $("tr.category a.delete").click(function(e){
                            $(this).parents('tbody').fadeOut("fast");
                    });

            });
    </script>

Paul D. Waite 2009-12-23 08:04:14

ansaurus

tags:

views:

answers:

Jquery Delete From Table

related questions