"closeest()" başka bir durumda çalışmıyor

Question

1. tıklamada select (add check) div için basit bir işlevsellik yaptım ve 2. tıkla kaldırılacak, diğer durumda "en yakın()" ifadesini kullandım. Almamak.

Lütfen

Yardım edin. Kod click here

JS için

: =

var selected = $('.demo-select'); 
selected.click(function() { 
    $(this).toggleClass('selected'); 
    if ($('.demo-select').hasClass('selected')) { 
     //alert(1); 
     $(this).append('<p class="test">check</p>'); 
    } else { 
     //alert(2); 
     $('.demo-select').closest('.test').remove(); 
    } 
}); 

Answer 1

sen geçirilen seçici eşleşen bir atası elemanı bulmak için kullanılır soyundan eleman değil üst öğe (.closest() aradığınız olarak find() kullanmak gerekiyor).

$(this).find('.test').remove(); 

Demo: Fiddle

Answer 2

kullanın find() bunu başarmak için. closest(), DOM ağacındaki atalarının içinden değil, kendi atalarına göre hareket edecektir. Birden çok öğe için

$('.demo-select').find('.test').remove(); //OR simply $(this).find('.test').remove() 

Güncelleme

size en yakın atası alacak $(this)

var selected = $('.demo-select'); 
selected.click(function() { 
    $(this).toggleClass('selected'); 
    if ($(this).hasClass('selected')) { //HERE $(this) 
     //alert(1); 
     $(this).append('<p class="test">check</p>'); 
    } else { 
     //alert(2); 
     $('this').find('.test').remove(); //HERE $(this) and find() 
    } 
}); 

Answer 3

closest kullanın.

var selected = $('.demo-select'); 
selected.click(function() { 
    $(this).toggleClass('selected'); 

    if ($('.demo-select').hasClass('selected')) { 
     $(this).append('<p class="test">check</p>') 
    } else { 
     $(this).find('.test').remove(); 
     //^^^^^^^^^^^^^^^^^^^ 
    } 
}); 

Demo: https://jsfiddle.net/tusharj/16dsa65j/4/

find: Sen .test almak için find kullanmalıdır

eşleşti elemanlarının cari kümesindeki her elemanın kökenini alın, bir selektör tarafından filtre, jQuery nesnesi veya öğesi.

Dokümanlar: Birden çok öğe için http://api.jquery.com/find/

DÜZENLEME

:

Demo: http://jsfiddle.net/tusharj/16dsa65j/9/

Answer 4

yerine elemanı için en yakın seçim yapmanın elemanı find gerekir. İşte

$('.demo-select').find('.test').remove(); 

Answer 5

yerine closet()

find() ait find() kullanmak gerekir: Bir selektör, jQuery nesnesi veya elemanı tarafından filtre eşleşti unsurların mevcut setinde, her bir elementin soyundan alın

closet(): Kümedeki her öğe için, öğenin kendisini sınayarak ve DOM ağacındaki ataları boyunca ilerleyerek, seçici ile eşleşen ilk öğeyi alın.

var selected = $('.demo-select'); 
 
selected.click(function() { 
 
    $(this).toggleClass('selected'); 
 
    if ($('.demo-select').hasClass('selected')) { 
 
    //alert(1); 
 
    $(this).append('<p class="test">check</p>'); 
 
    } else { 
 
    //alert(2); 
 
    $(this).closest('.test').remove(); 
 
    } 
 
});

.demo-select { 
 
    border: 1px solid; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.test { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="demo-select"></div> 
 
<div class="demo-select"></div> 
 
<div class="demo-select"></div>

Gösteri: http://jsfiddle.net/tharindukumara/3b4forzd/