Question

How to delete table rows and collection row with JavaScript Code?

Forms

Updated November 6, 2014

asked on November 3, 2014

Hi every one,

I have a problem with delete rows of table and rows of collection filed.

I wish to delete row not only remove data but also delete the row of table.

So I use: $(this).find('.form-del-field').trigger('click');

instead of $(this).closest('tr').remove(); or $(this).closest('tr').hide();

Down there is my code to delete some rows which are checked checkbox

$('.cf-table-block').ready(function(){
$('.cf-table-block tbody tr').each(function (){

if ($(this).find('.PCVClick input').prop('checked') != true){
$(this).find('.form-del-field').trigger('click');
}

});
});

but It doesn't work.

And I wish to delete collection row (which has a condition ,such as a row with zero data in a field)

My code:

$('.cf-collection-block').ready(function(){

$('.cf-collection-block ul').each(function (){

if ($(this).find('.TypeAmount input').val() == 0){

$(this).find('.cf-collection-delete').trigger('click');
}

});
});
And it doesn't work,too.

I test my code with hide(); and remove(); method and it works good.

Did I miss something? and what is the best way to remove a row of table or collection (with a condition)?

Help please.

Bongkoch,

delete_row_of_collection_.png (54.46 KB)

| Download

Delete_table_row.png (55.06 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on November 5, 2014 • Show version history

Sorry Bongkoch,

I was troubleshooting just by looking at the code, and not running it. I built a small demo form and found the problem fairly quickly. The collection doesn't use a list to manage the repeated sections, rather it is just a bunch of nested DIV tags. We'll need to change the each() function again. Also... I don't think parseNumber() is a valid function, as far as I can tell. You may have to use either parseInt() or parseFloat() depending on what you are expecting for input values. Hopefully this works for you:

$(document).ready( function() {

   $('.Submit').on('click', function () {
 
      $('.cf-table-block tbody tr').each(function () {
         if ($(this).find('.PCVClick input').prop('checked') != true){
            $(this).find('.form-del-field').trigger('click');
         }
      });
 
      $('.cf-collection > div').each(function (){              
         if (parseInt($(this).find('.TypeAmount input').val()) == 0){
            $(this).find('.cf-collection-delete').trigger('click');
         }           
      });
 
   });
});

6 0

replied on November 5, 2014 • Show version history

Hi Scott,

You save my life since it works perfectly. Thank you very much for your time. I would like to click more than 1 hit like but I can't. :)

Best regards,

Bongkoch.

1 0

replied on November 6, 2014

Happy to help out! The more you work with this stuff, the better you'll get. I started out in the same place as you.

Cheers,

-Scott

1 0

Replies

replied on November 4, 2014 • Show version history

The actual code to press the delete button should work for both the collection and the table. My question to you would be are you sure this code is running when you think it is? (You could add an alert() to your code to get a popup and help with troubleshooting).

As far as I know, the ready() function only applies to the document as a whole. This event triggers as soon as your browser loads the DOM structure of the HTML for the entire page. Any argument you put in the jquery selector won't matter. So essentially, your $('.cf-collection-block').ready() and $(.'cf-table-block').ready() are only running once, and they will be triggered by the same event as the generic $(document).ready(). You are just assigning multiple "listeners" for this one event, and they will run sequentially, in some order depending on how they are declared. In general, this is a good place to do things that you need to run when the page loads (initialize variables, set up event listeners, etc).

My advice would be to try finding an event that you want to trigger this automatic deletion (change, click, blur, etc...) and then assign an event handler to the appropriate field where you insert your conditional statements above. Do you want to do this when the form is submitted for instance? If that's the case, you could try the following:

$(document).ready( function() {
  $('.Submit').on("click", function () {
    $('.cf-table-block tbody tr').each(function () {
      if ($(this).find('.PCVClick input').prop('checked') != true){
        $(this).find('.form-del-field').trigger('click'); 
      }
    });
  });
});

1 0

replied on November 5, 2014 • Show version history

I see now, I missed it the first time. The each() function loops over all the sibling elements at the same level on the form. You're looping over the "ul" element, which is the outer element denoting a list. There is probably only one "ul" for your collection, with many "li" list item elements below it. Those are what you want to loop over. If you change that to $('.cf-collection-block ul li').each( ... ) it should start working.

Also, I would probably lose the "ready" function wrappers you have in there and just stick the whole Submit "click" function inside the document ready function. If it works as you have it now, then I guess you're fine... but I would be afraid it might cause unexpected behavior if you aren't entirely sure why it's there.

$(document).ready( function() {

   $('.Submit').on('click', function () {

      $('.cf-table-block tbody tr').each(function () {
         if ($(this).find('.PCVClick input').prop('checked') != true){
            $(this).find('.form-del-field').trigger('click');
         }
      });

      $('.cf-collection-block ul li').each(function (){               
         if (parseNumber($(this).find('.TypeAmount input').val()) == 0){
            $(this).find('.cf-collection-delete').trigger('click');
         }            
      });

   }); 
});

1 0

replied on November 4, 2014

Hi scott,

Sorry for late response.I' m on testing and found that your code works perfectly with delete table row.

I miss 'cause I forgot about trigger the event.

So, thank you very much for helping me throughout.

But I 'm still stuck on delete collection field row.

The following is my code from your suggestion.

$('.Submit').on('click', function () {

$('.cf-table-block').ready(function(){
$('.cf-table-block tbody tr').each(function () {

if ($(this).find('.PCVClick input').prop('checked') != true){

$(this).find('.form-del-field').trigger('click');
}
});
}); /*Click to delete table's row works perfectly*/

$('.cf-collection-block').ready(function(){
$('.cf-collection-block ul').each(function (){

if (parseNumber($(this).find('.TypeAmount input').val()) == 0){

// $(this).closest('ul').hide();
$('.test input').val("test");
$(this).find('.cf-collection-delete').trigger('click');
}

});
});

}); /* The section to delete the row of collection doesn't work!!!*/

I 'v tested the condition :

/* if (parseNumber($(this).find('.TypeAmount input').val()) == 0)*/

by filled in some data in a field when reach this condition and The data filled in correctly.

So I'm not sure for now about this method :

$(this).find('.cf-collection-delete').trigger('click');

Did I refer something wrong?

Regards,

Bongkoch

0 0

replied on November 5, 2014

Hi Scott,

I 'v already tested your code carefully with some data,but unfortunately it still doesn't work.

Only first section (delete table's row) works great.But anyway thank you for your consulting.

I 'll try with open a case.

Appreciate,

Bongkoch.

0 0

You are not allowed to follow up in this post.

Question

Question

How to delete table rows and collection row with JavaScript Code?

Answer

Replies

Sign in to reply to this post.