класс не получает удалены в центре внимания - JQuery

Question

HTML код

<div class="mainWrapper"> 
    <div class="FirstLayer removeClass"> 
     <input class="foo" value="fooX" /> 
    </div> 
    <div class="SecondLayer"> 
     <div class="thirdLayer"> 
      <input class="fee" /> 
     </div> 
    </div> 
</div> 

JQuery

$("input.fee").focus(function(){ 
    $(this).closest("div.FirstLayer").removeClass("removeClass"); 
}); 

CSS

.removeClass { 
    background-color: red; 
} 

Ниже скрипку http://jsfiddle.net/YZ6vg/3/

Почему мой класс не удаляется в фокусе ?.

Answer 1

Ваш Selector неправильно

$("input.fee").focus(function(){ 
    $(this).closest("div.mainWrapper").find("div.FirstLayer").removeClass("removeClass"); 
}); 

Working Demo

---

.closest(selector)

Описание: Для каждого элемента в наборе, получить первый элемент, соответствующий селектор путем тестирования сам элемент и пройдя через его ancestors в дереве DOM.

---

Проблема

$("input.fee") не предки элемент в div.FirstLayer видите на изображении ниже.

Решение

$("input.fee").closest("div.mainWrapper") Получить предкам элемент div.mainWrapper и чем найти элемент div.FirstLayer