Добавить класс родительскому объекту, у которого есть определенный дочерний элемент

Question

Я хочу добавить класс родительскому классу , когда я нажимаю на класс .input, когда родитель этого класса .input имеет дочерний элемент .delete. В противном случае удалите родительский элемент вместо его скрытия. Проблема в том, что он всегда добавляет класс .hidden родительскому элементу, несмотря ни на что.

HTML:

<div class='container'> 
    <input class='input' type='text'> 
    <input class='input delete' type='text'> 
</div> 
<div class='container'> 
    <input class='input' type='text'> 
</div> 

JS:

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

    var element = $(this); 

    if (element.parent().has('.delete')) { 
      element.parent().addClass('hidden'); 
     } else { 
      element.parent().remove(); 
    } 
}); 

Answer 1

.has() не возвращает true/false, он выбирает. Изменение если:

if (element.parent().has('.delete').length) { 

jsFiddle example

Answer 2

Если вам нужно проверить, если родитель имеет дочерний элемент с .delete класса, то вы можете изменить свой код на этот:

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

    var element = $(this); 

    if (element.parent().children('.delete').length > 0) { 
      element.parent().addClass('hidden'); 
     } else { 
      element.parent().remove(); 
    } 
}); 

Answer 3

В вашем конкретном случае

element.parent().has('.delete') 

возвращает объект JQuery, который будет иметь иметь либо одну, либо нулевые элементы DOM в нем. Используется в выражении «if», это будет оцениваться как true, поэтому вы никогда не получите случай else.

Вместо этого используйте

element.parent().has('.delete').length 

который будет возвращать 0 или 1. Нулевой будет вычисляться ложно, если заявление.