CODEWITHSUNDEEP
javascriptjqueryhtml
None
None

Reputation: 5670

find last 2 children using jquery

My HTML is like this

<div class="accordion_example2 smk_accordion acc_with_icon"> 
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            19714320
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
             
                <li>
                    Break Load (kg) 6.05
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-blue">
            <div class="acc_icon_expand"></div>
            mere test tekst …
        </div>
        <div class="acc_content accordian-content" style="display: none;">
            <ul>
              
               
                <li>
                    Break Load (kg)
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            test tekst
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
               
                <li>
                    Break Load (kg)
                </li>
            </ul>
        </div>
    </div>
</div>

I want to find the last two accordion_in elements and remove its child element accordian-content from it. How can I achieve this through Jquery? My expected out put is like this

<div class="accordion_example2 smk_accordion acc_with_icon"> 
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            19714320
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
             
                <li>
                    Break Load (kg) 6.05
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-blue">
            <div class="acc_icon_expand"></div>
            mere test tekst …
        </div>
        
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            test tekst
        </div>
        
    </div>
</div>

Upvotes: 2

Views: 2259

Answers (3)

charlietfl
charlietfl

Reputation: 171700

Can use :gt() selector and by using a negative value it will work from the end. Requires jQuery 1.8+

$('.accordion_in:gt(-3)').find('.acc-content').remove();

reference: :gt() selector docs

Upvotes: 3

Roboroads
Roboroads

Reputation: 1709

You can do this by using de :nth-last-of-type selector

$(".class:nth-last-of-type(-n+2)") selects the last 2 .class elements.

In your case:

$(".accordion_in:nth-last-of-type(-n+2)").children(".accordian-content").remove();

Or use find: $(".accordion_in:nth-last-of-type(-n+2)").find(".accordian-content").remove();

Edit: Had to be -n+2 instead of 2.

Upvotes: -2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

Try this : You can use .slice() to get last two elements and then remove accordian-content div from it.

$(function(){
  $('div.accordion_example2 .accordion_in').slice("-2").find(".accordian-content").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion_example2 smk_accordion acc_with_icon"> 
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            19714320
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
             
                <li>
                    Break Load (kg) 6.05
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-blue">
            <div class="acc_icon_expand"></div>
            mere test tekst …
        </div>
        <div class="acc_content accordian-content" style="display: none;">
            <ul>
              
               
                <li>
                    Break Load (kg)
                </li>
            </ul>
        </div>
    </div>
    <div class="accordion_in">
        <div class="acc_head accordian-title-white">
            <div class="acc_icon_expand"></div>
            test tekst
        </div>
        <div class="acc_content accordian-content-white" style="display: none;">
            <ul>
               
                <li>
                    Break Load (kg)
                </li>
            </ul>
        </div>
    </div>
</div>

Upvotes: 4

Related Questions