Удалить кнопку из строки при нажатии на нее

Question

Строка получает класс «активен», когда пользователь нажимает на него («Активный» класс добавляется с отдельным фрагментом кода, и это отлично работает).

Теперь я хочу проверить этот «активный» класс и, если он там, он удалит кнопку, находящуюся внутри ячейки в этой строке. Кнопка имеет класс «add-selection».

Вот сценарий, который я написал, что в моем уме должен работать ... однако он этого не делает.

$(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> 

Answer 1

вы можете показать нам HTML? $ (this) .parents (tr) не имеет смысла, когда $ (this) уже tr?

Я предполагаю, что вы хотите

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

Answer 2

Вы должны быть в состоянии справиться с этим с помощью простого CSS Дополнительно:

.active button {display: none;} 

Это при условии, что, когда активна, она будет на самом деле хорошо просто скрыть кнопку, а не полностью удалить ее.

Кроме того, если вам нужно пространство, что кнопка занимает будет поддерживаться, вы могли бы пойти с этим подходом, вместо:

.active button {visibility: hidden;} 

---

EDIT: Если вы действительно хотите физически удалить кнопка с DOM, то это будет сделать это:

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

Answer 3

Нет необходимости идти к родителям, а затем дальше, вы уже в тр, который был clicke d, так что вы должны быть в состоянии сделать:

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

Answer 4

Если вы хотите, чтобы удалить кнопку с add-selection класса, который находится под <tr> с active класса, вы можете просто сделать это:

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

Таким образом, вы могли бы упростить код для этого:

$(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>

Answer 5

Попробуйте это:

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

метод hasClass не нужно "" для представления класса. Он возвращался неверно.