You are viewing limited content. For full access, please sign in.

Question

Question

Forms Jquery - Having trouble hiding the first delete row button

asked on July 21 Show version history

In a table, I put the totals at the top since they need to be able to add rows to the bottom

For this reason I want to hide the first delete button, and since this is the only table that you can add rows to, I would expect this to work. But it does nothing and does not throw any errors. The click function is running but the method to hide the first delete button found doesn't actually hide it.

I can hide all of them but I want to hide the first one, or any specific one for that matter using the get(n) method.

  $('.cf-table-add-row').on('click',function(){
    
    $('.cf-table-delete').first().hide();
    
  });

 

0 0

Answer

SELECTED ANSWER
replied on July 21 Show version history

There's actually more elements that use the same class, so if you run $('.cf-table-delete').length in the console you'll find twice as many as the number of rows in your table.

To get around that, you could:

  • get the first row of tbody first, then target the delete elements
  • or just use CSS

 

.myTable tbody tr:first-of-type .cf-table-delete {
  display: none !important;
}

 

1 0
replied on July 22

When working with collections we identified that it was prop value rather than a row or a ul, may be helpful looking for that and then explicitly naming this through JS and applying style in that way.

0 0
replied on July 22

The CSS solution is the best! It just ensures it is hidden all the time. Thank you! I am surprised there is any other object with a class name like cf-table-delete. It seems very specific.

0 0
replied on July 22

The class is very specific, but the items are almost certainly related since they appear in pairs on each row of the table. Probably there for some functional reason.

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.