CODEWITHSUNDEEP
javascriptjqueryajax
LargeTuna
LargeTuna

Reputation: 2824

Jquery add rows then remove them if not needed

I am struggling with setting up jquery to insert new table rows and then remove them if I dont need them.

For example:

I have two buttons on a each table row, like so: 

 --------------------------------------
 |Add / Remove | Name  | Id | Color   |
 --------------------------------------
 |Add / Remove | Shirt | 1  | Blue    |
 --------------------------------------
 |Add / Remove | Shirt | 2  | Red     |
 --------------------------------------

When I click the "Add" button it will use ajax to go out and grab data and insert rows after the current row. Here is my code (this works fine):

 $(function() {
        $('#example').on('click', 'input[name="cmdAddRow"]', function() {
            var curRow = $(this).closest('tr');
            $.ajax({
                cache: false,
                type: 'POST',
                url: '{{ path('inventory_low_test_asin_data') }}',
                data: '',
                success: function(data)
                {
                    var newRow = data.htmlData;
                    curRow.after(newRow);
                }
            });
        });
    });

 --------------------------------------
 |Add / Remove | Name  | Id | Color   |
 --------------------------------------
 |Add / Remove | Shirt | 1  | Blue    |
 --------------------------------------
 | Inserted    | A     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | B     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | C     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 | Inserted    | D     | 1  | Blue    | - Need to be able to remove this row
 --------------------------------------
 |Add / Remove | Shirt | 2  | Red     |
 --------------------------------------

Now this is the tricky part, if I dont need those rows of data which were inserted (sometimes it will return upwards of 20 rows which are inserted after the current row), I will need to be able to remove all of those rows that were inserted all at once (not one at a time). How is this handled when I click the "Remove" button for that row? I am not sure what to write for jQuery.

Thanks so much for your help!!!!

Upvotes: 1

Views: 519

Answers (3)

ejc
ejc

Reputation: 343

Removing elements by ID restricts you to deleting rows 1 at a time. I'd suggest assigning a class to every row belonging to the AJAX request. The class will need to be unique per every ajax request...for simplicity, you can append a time-stamp to a string and use that as your class name.

Wherever you're constructing the table (whether it be on the server or client side), add the unique class:

<tr class="uniquely_named_class">data....</tr>
<tr class="uniquely_named_class">data2....</tr>

Now when you click the button to delete the unwanted rows, all you need is the name of the class to select all the rows you want to delete... in this case, it would delete the two rows listed above:

$('#example').click(function(){
    $('.uniquely_named_class').remove();
});

Upvotes: 1

LargeTuna
LargeTuna

Reputation: 2824

Here is what I ended up doing:

Step 1: I passed the id of the row to the children rows (inserted ones from ajax). I then set the data-id of each of these to that value.

Step 2: If the remove button was clicked for that row, I then would pass in the id of that row and only remove the children who's data-id matched that value. 

 $('#example').on('click', 'input[name="cmdRemRow"]', function() {
      var theID = $(this).data('asin');
      $("tr[data-id='" + theID + "']").remove();
 });

If anyone has a better method, please add your comments I would welcome a different approach! Thanks!

Upvotes: 0

Ram
Ram

Reputation: 144689

You can add a class to the generated tr elements, then you can simply select and remove them using jQuery remove method:

$('table').on('click', '.remove', function(){
   $('tr.inserted').remove();
});

Or if you want to select the next rows that have similar .id cells(assuming they have id class names), you can use nextAll method:

$('#example').on('click', 'input[name="cmdRemRow"]', function() {
     var $this = $(this),
            id = $.trim( $this.parent().siblings('.id').text() );
     $this.closest('tr').nextAll().filter(function(){
         return $.trim( $('td.id', this).text() ) === id;
     }).remove();
})

Upvotes: 0

Related Questions