jquery - jQuery: Remove rows based on class

Question

I've got a problem with jQuery and removing some elements based on their class. See http://jsfiddle.net/JBKp4/1/

When the delete link is clicked in the itemRow the optionRow's and commentRow of that Item should be delete asswell. But I'cant determine the class of the row.

I hope somebody can help me out. Thank you!

score 11 · Accepted Answer

your code can be much simpler:

$('body').on('click', '.delete', function() {
    var $tr = $(this).closest('tr');
    if ($tr.attr('class') == 'itemRow') {
        $tr.nextUntil('tr[class=itemRow]').andSelf().remove();
    }
    else {
        $tr.remove();
    }
});

see it working here: http://jsfiddle.net/RASG/MeaRQ/

score 8 · Accepted Answer

you can do this by selector

$(".className").remove();

and there is typo in <tr class"itemRow"> should be <tr class="itemRow">

score 2 · Accepted Answer

As others have pointed out, fix your class attributes.

Your JavaScript could be made a bit cleaner as well:

$(document).ready(function() {
    $('body').on('click', '.itemRow .delete', function() {
        $(this).parents('tr').nextUntil('.itemRow').andSelf().remove();
    });

    $('body').on('click', '.optionRow .delete', function() {
        $(this).parents('tr').remove();
    });
});

Demo: http://jsfiddle.net/JBKp4/35/

score 1 · Accepted Answer

Nest your rows. Rather than creating new rows in the table for each item nest them hierarchially:

<table class="items">
    <tr class="item">
        <table class="options">
            <tr class="option">
                <table class="comments">
                    <tr class="comment">
                    </tr>
                </table>
            </tr>
        </table>
    </tr>
</table>

Honestly I would recommend not using tables for this. It looks like your content isn't going to be tabular data and so Tables doesn't make sense for layout. Use Divs instead.

score 1 · Accepted Answer

Fix the = problem others have noted. There is more to it than that.

You need a way to associate items with their options. I suggest that you just update the html:

<tr class="itemRow" id="item1">
...
<tr class="optionRow item1">
...

Note that the optionRow should have the ID of the item it belongs to as a class. That way, when you delete the item row, you can do something like:

$("." + this.id).remove();

See: http://jsfiddle.net/JBKp4/11/

If you don't want to do this (or can't for some reason) it's more complicated. Basically you will have to keep getting the .next() of the itemRow TR until it either runs into another .itemRow or there is no next TR.

score 0 · Accepted Answer

First off, your markup was buggered. You were missing = in the class attributes of the tr elements. Clean markup makes the JS side of things a lot easier to manage. I would suggest you fix your markup, even refactor it to be more semantic (group data together into structures that make sense using elements like <dl> or <ul>).

Better html = less work.

Second, you were binding to body and the .delete element. That's a lot of overhead in terms of event monitoring that jQuery has to do. It's unnecessary for the type of functionality you want to achieve. Bind only to elements that you want to track events on, use callbacks to handle related cases.

Lastly, there's absolutely nothing linking your <tr> elements together that would indicate that those rows are related to the one you're attempting to delete. So, your script was deleting only the one row. You can use data-attributes and other element attributes to link your target elements together. I updated your fiddle to show you what I mean. Your Updated Fiddle...

Here's the revised jQuery script:

jQuery( function(){
    $('.delete').click( function(){
        var obj = $( this ); // your delete link
        var table = obj.closest('table'); // the containing table
        var trgroup = obj.attr('data-group'); // a data-attribute that links your other elements together

        if( trgroup ) // If the attribute is available continue...
        {
            console.log( table.find('tr[rel="' + trgroup + '"]') );
            // Find all related element and remove them.
            table.find('tr[rel="' + trgroup + '"]').empty().remove();
        }

        // Remove the table row of the executing link and it's children.
        obj.closest('.itemRow').empty().remove();
    });
} );

I'll probably catch a little flack for using empty().remove() instead of just .remove(), but that's my own preference.

jquery - jQuery: Remove rows based on class

6 回答 6

Related

Reference