Delete previously added element in jQuery

RedGiant

Updated Example

I want to add extra rows via AJAX to a table using tablesorter with filter and sticky header plugins. I can remove all AJAX rows by adding a class to them and using $('.row_selector').empty();. But I want to have another button that only deletes just the previously added row. Is there any way to do that?

I've this with no success:

$('.undo').click(function(){ 
    if ($('.tablesorter tbody tr').length > 1)
        {
           $(this).closest('tr').empty();               
        }; 
});

jQuery:

$('.undo').click(function(){  //Remove previously added row
    if ($('.tablesorter tbody tr').length > 1)
        {
           $(this).closest('tr').empty();               
        }; 
});

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

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

var ajax_request;
function add_Data() {
    $('.area button').click(function(){
    var colspan = $("table.tablesorter tbody tr").length;
            console.log(colspan);
            if(colspan > 10)
            {
                alert("Too Many Rows");
                return false;
            }
          var source = $(this).data('feed');
          if(typeof ajax_request !== 'undefined')
        ajax_request.abort();
        ajax_request =   
        $.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="trremove"><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();

HTML:

<button class="undo">Remove Previous</button>
<button class="remove">Remove</button>
<div class="area"><button>Class B</button></div>
<div class="area"><button>Class C</button></div>
<div class="area"><button>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>
Pete

As you have a sorter I would have a global var of lastAdded, then in you ajax call you can set it doing this in your success function:

lastAdded = $('<tr style="display:table-row;" class="trremove"></tr>').html('<td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td>');
$(".tablesorter tbody").append(lasstAdded);

Then in your undo you can just use

if (lastAdded != null) {
    lastAdded.remove();
}

Updated fiddle as example (doesn't work as original doesn't work - just to show code)

If you don't want a global class, you can try using an extra class:

In you success:

 $('.lastadded').removeClass('lastadded');
 $(".tablesorter tbody").append('<tr style="display:table-row;" class="trremove lastadded"><td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td></tr>');

In your undo

$('.lastadded').remove();

Example

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Delete previously added element in jQuery

From Dev

Dynamically added element will not delete

From Dev

jQuery add element to previously defined event handler

From Dev

JQuery Selector for hasClass or Previously Clicked Element

From Dev

jQuery keypress not functioning on previously "hidden" element

From Dev

Click on a element and get a previously elements text in jquery

From Dev

Jquery, delete dynamically added content

From Dev

JQuery Selector on Dynamically Added Element

From Dev

jQuery click on a dynamically added element

From Dev

jQuery width of element added in loop

From Dev

Jquery no effect on element added with replaceWith

From Dev

JQuery delete duplicates of an element

From Dev

delete an element using jQuery

From Dev

jquery add element then select (for overwriting) added text

From Dev

how to use jquery .data with dynamically added element

From Dev

Jquery changes on element which is added dynamically is not working

From Dev

jQuery on blur / focusout not firing on dynamically added element

From Dev

jQuery UI droppable on dynamically added element?

From Dev

jQuery select element with class added dynamically

From Dev

How to select a dom element that was added by prototype with jquery?

From Dev

Jquery selector not behaving dynamically on added dom element

From Dev

jQuery trigger on element that is added after page load

From Dev

Get jQuery to work on element added to the DOM

From Dev

How can I remove an element added by jquery?

From Dev

How to remove jQuery element added by .append()?

From Dev

jQuery on blur / focusout not firing on dynamically added element

From Dev

jQuery - click event not being added to every element

From Dev

jQuery UI droppable on dynamically added element?

From Dev

Jquery delete element after prepend

Related Related

  1. 1

    Delete previously added element in jQuery

  2. 2

    Dynamically added element will not delete

  3. 3

    jQuery add element to previously defined event handler

  4. 4

    JQuery Selector for hasClass or Previously Clicked Element

  5. 5

    jQuery keypress not functioning on previously "hidden" element

  6. 6

    Click on a element and get a previously elements text in jquery

  7. 7

    Jquery, delete dynamically added content

  8. 8

    JQuery Selector on Dynamically Added Element

  9. 9

    jQuery click on a dynamically added element

  10. 10

    jQuery width of element added in loop

  11. 11

    Jquery no effect on element added with replaceWith

  12. 12

    JQuery delete duplicates of an element

  13. 13

    delete an element using jQuery

  14. 14

    jquery add element then select (for overwriting) added text

  15. 15

    how to use jquery .data with dynamically added element

  16. 16

    Jquery changes on element which is added dynamically is not working

  17. 17

    jQuery on blur / focusout not firing on dynamically added element

  18. 18

    jQuery UI droppable on dynamically added element?

  19. 19

    jQuery select element with class added dynamically

  20. 20

    How to select a dom element that was added by prototype with jquery?

  21. 21

    Jquery selector not behaving dynamically on added dom element

  22. 22

    jQuery trigger on element that is added after page load

  23. 23

    Get jQuery to work on element added to the DOM

  24. 24

    How can I remove an element added by jquery?

  25. 25

    How to remove jQuery element added by .append()?

  26. 26

    jQuery on blur / focusout not firing on dynamically added element

  27. 27

    jQuery - click event not being added to every element

  28. 28

    jQuery UI droppable on dynamically added element?

  29. 29

    Jquery delete element after prepend

HotTag

Archive