2015-01-08 5 views
2

Предполагая, что у меня есть следующий HTML:Что делает последний ребенок?

<div class="motiv_input_container"> 
    <div class="hide_if_necessary"> 
      <span class="motiv_label">&nbsp;</span> 
      <span class="motive_head_text">Menge inkl. Ersatz</span><span class="motive_head_text">Gesamtpreis zzgl. MwSt</span> 
    </div> 
    <div class="motiv_input_holder"></div> 
    <div class="motiv_input_holder"></div> 
    <div class="motiv_input_holder"></div> 
    <div class="motiv_input_holder"></div> 
    <div class="motiv_input_holder"></div> 
    <div class="motiv_input_holder"></div> <--- I WANT TO SELECT THIS ONE 
    <div class="hide_if_necessary"> 
     <span class="motiv_label">&nbsp;</span> 
     <span class="motive_head_text">Gesamttotal zzgl. MwSt</span> 
     <input type="text" class="motive_input_total_display"> 
     </div> 
</div> 

.motiv_input_holder добавляются с помощью JS с помощью следующей строки:

$(this).parent().parent().children(".motiv_input_container") 
.children(".hide_if_necessary:first-child") 
.after("<div class='motiv_input_holder'></div>"); 

Таким образом, в основном, они будут добавлены «между» первым и вторым ".hide_if_necessary" , Теперь, я хочу, чтобы иметь возможность удалить последние ".motiv_input_holder", однако, я столкнулся с небольшой проблемой. Моя первая попытка была такой:

$(this).parent().parent().children(".motiv_input_container").children(".motiv_input_holder:last-child").remove(); 

Однако ни один из них не работали, даже если они должны быть в соответствии с моей логикой (last-of-child не получилось кстати). Теперь я решил это со следующим:

$(this).parent().parent().children(".motiv_input_container").children(".motiv_input_holder:nth-last-child(2)").remove(); 

Вопрос теперь в том, почему? Должно ли last-child делать именно то, что я хотел бы в этом случае? Я что-то упускаю?

+1

Каков контекст 'этого' в вашем JS? – mattytommo

+1

'last-child' должен быть последним дочерним его родителем. [Источник] (https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child). '.children (". motiv_input_holder: last ")' должен работать. – anpsmn

ответ

0

В jQuery (и в CSS) :last-child соответствует любому элементу, который является последним дочерним элементом его родителя. В вашем случае это не так: после него есть еще один ребенок. В этом контексте классы не имеют значения.

Смежные вопросы