Compare two tables rows and remove if match

Question

Could anyone help me please in JQuery? I have two tables on my site leftTable and rightTable with same column names. The leftTable I fill up from a DB, but the rightTable it just contains some rows. What I would like to do is to not show (or remove) in the leftTable those rows which are exist in the rightTable!

I Tryed this:

$("#tableLeft tr").each(function(){
    if($(this).find("td")[0].innerHTML == $("#tableRight tr").find("td")[0].innerHTML)
    {
        $(this).remove;
    }
});

Answer 1

I suppose you have something like this:

<table id="T1">

    <tr><td>111</td></tr>
    <tr><td>222</td></tr>
    <tr><td>333</td></tr>

</table>


<table id="T2">

    <tr><td>444</td></tr>
    <tr><td>111</td></tr>
    <tr><td>333</td></tr>

</table>

To remove rows from table with id="T2" you can do something like this:

$('#T1 tr').each(function(){

    var currentRowHTML=$(this).html();

    $('#T2 tr').each(function(){
        if($(this).html()===currentRowHTML){
            $(this).remove();
        }
    });
});

Answer 2

Just an idea

$(function(){
    $('#btn').on('click', function(e){
        $('#right_table tbody tr').each(function(){
            var row=$(this).html();
            $('#left_table tbody tr').each(function(){
                if(row==$(this).html()) $(this).remove();
            });
        });
    });
});​

DEMO.

I've already mentioned it's an idea only because you didn't provide any code (HTML) so remember that both tables should heve same (class/id) in the rows if they have any.