CODEWITHSUNDEEP
javascriptjqueryhtml
RedGiant
RedGiant

Reputation: 4748

toggle between adding and removing an element

This is a Fiddle Example(updated) of adding extra rows to the tablesorter via AJAX

I'm trying to add a function that allows people to toggle between adding and removing the same element on click. Like when you click on Class A, if it doesn't exist in the table, it will be added to the table, if exists, removed and return false. I came up with this code to check if the button's data attribute matches a row's class which is distinctive as it uses item.title from their own JSON file. 

$('.area button').click(function(){
var dataterm = $(this).data('term');
    if($('.tablesorter tbody tr.'+dataterm).length)
    {   
        return false;
        $('.tablesorter tbody tr.'+dataterm).remove();
    }

But it isn't working. Could anyone show me how to do that?

var ajax_request;
function add_Data() {
    $('.area button').click(function(){
        var dataterm = $(this).data('term');
        if($('.tablesorter tbody tr.'+dataterm).length)
        {   
            return false;
            $('.tablesorter tbody tr.'+dataterm).remove();
        }

        var source = $(this).data('feed');

        $.ajax({
        url: source,
        success: function (data) {

         $(data.query.results.json.json).each(function (index, item) {         
          var title = item.title,
          year = item.year, 
          job = item.Job,
          education = item.Education,
          background = item.Background,
          ingredient = item.Ingredient;
         $(".tablesorter tbody").append('<tr style="display:table-row;" class="'+title+' trremove lastadded' + $(".tablesorter tr.trremove").length + '"><td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td></tr>');

         });
        },
    });
          $("table").trigger("update"); 

            var sorting = [[2,1],[0,0]]; 
            $(".tablesorter").trigger("sorton",[sorting]); 
        }); 
        return false; 
};

add_Data();

$('.undo').click(function(){ 
    $('.lastadded' + ($(".tablesorter tr.trremove").length - 2)).remove();
});


$('.remove').click(function(){

    $('.trremove').remove();
    $(".tablesorter").trigger("update");
});

HTML

<div class="area"><button data-term="A">Class A</button></div>
<div class="area"><button data-term="C">Class C</button></div>
<div class="area"><button data-term="D">Class D</button></div>
<table class="tablesorter" cellspacing="1">
 <thead>
  <tr>
   <th style="visibility:hidden;">first name</th>
   <th>first name</th>
   <th>last name</th>
   <th>age</th>
   <th>total</th>
   <th>discount</th>
   <th>date</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
</table>

Upvotes: 0

Views: 112

Answers (1)

Rodney G
Rodney G

Reputation: 4826

You have a return false before executing your .remove() method on the found rows.

It should be 

if($('.tablesorter tbody tr.'+dataterm).length)
{   
    $('.tablesorter tbody tr.'+dataterm).remove();
} else {
    ...
}

Here's the update to your Fiddle.

Upvotes: 1

Related Questions