CODEWITHSUNDEEP
javascriptjquery
zemaker
zemaker

Reputation: 181

Remove button from row when you click on it

A row gets a class of "active" when a user clicks on it (The "active" class is added with a separate chunk of code, and that works fine).

Now I want to check for that "active" class and if its there it would remove the button that is inside the cell in that row. The button has a class of "add-selection".

Here is the script I wrote, that in my mind should work...however it doesn't do it. 

$(document).ready(function() {
    $('tr').on('click', function(){
        if ( $(this).hasClass('.active') ) {
                $(this).parents('tr').next().remove('.add-selection');
        }
    });
});

HTML: 

<tr role="row" class="even active">
   <td class="sorting_1">Cell 1 <button type="button" class="btn add-selection pull-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></td>
 </tr>

Upvotes: 0

Views: 255

Answers (5)

Zoran P.
Zoran P.

Reputation: 880

can you show us HTML? $(this).parents(tr) makes no sense when $(this) is already tr?

I am assuming you want 

$(document).ready(function() {
    $('tr').on('click', function(){
        if ( $(this).hasClass('active') ) {
                $(this).find('.add-selection').remove();
        }
    });
});

Upvotes: 0

Donal
Donal

Reputation: 32713

If you want to remove the button with an add-selection class, that is under a <tr> with an active class, you can just do this:

$("tr.active > td > .add-selection").remove();

So, you could simplify your code to this:

    $(document).ready(function() {
        $('tr').on('click', function(){
            $("tr.active > td > .add-selection").remove();
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <tr role="row" class="even active">
      <td class="sorting_1">Cell 1 
        <button type="button" class="btn add-selection pull-right">test
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        </button>
    </td>
  </tr>
</table>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

Try this:

<script>
            $(document).ready(function()
            {
                    $('tr').on('click', function()
                    {
                            if($(this).hasClass('active'))
                            {
                                    $(this).find(".add-selection").remove();
                            }
                    });
            });
    </script>

hasClass method does not need "." to represent class. It was returning false..

Upvotes: 0

talemyn
talemyn

Reputation: 7950

You should be able to handle this with a simple CSS addition:

.active button {display: none;}

This is under the assumption that, when active, it would actually be okay to simply hide the button, rather than completely remove it.

Additionally, if you need the space that the button takes up to be maintained, you could go with this approach instead:

.active button {visibility: hidden;}

EDIT: If you really do want to physically remove the button from the DOM, then this would do it:

$(document).ready(function() {
    $('tr').on('click', function(){
        if ($(this).hasClass('.active')) {
            $(this).find('.add-selection').remove();
        }
    });
});

Upvotes: 1

Lupin
Lupin

Reputation: 1244

No need to go up to parents and then next, you are already in the tr that was clicked so you should be able to do:

$('tr').on('click', function(){
        if ( $(this).hasClass('.active') ) {
                $(this + '.add-selection').remove();
        }
    });

Upvotes: 0

Related Questions