1

I have an html like this

<ul class="products">
    <li>
        <a href="#" class="product-images">
            <span class="featured-image">
                <img src="img1.jpg"/>
                <img src="img1-1.jpg"/>

            </span>
        </a>
    </li>
    <li>
        <a href="#" class="product-images">
             <span class="featured-image">
                <img src="img2.jpg"/>
                <img src="img2-2.jpg"/>
             </span>
        </a>            
    </li>

//some other li elements
</ul>

What I want to do is get the fist image in the first li element and remove that with jQuery.

What I've tried

jQuery (document).ready(function(){
        jQuery('.products li:first .featured-image img:first').remove();
});

But that removes all img under first span.

Any help is appriciated.

FreshPro
  • 875
  • 3
  • 14
  • 35
  • 3
    There's a superfluous `)` in your selector – Pekka Jan 17 '17 at 12:28
  • ...and you want `.featured-image:first img`. Otherwise you'll select the first image in each `.featured-image` element. – Pekka Jan 17 '17 at 12:28
  • possible duplicate: http://stackoverflow.com/questions/22117483/jquery-find-first-direct-child-of-a-type and http://stackoverflow.com/questions/8531189/jquery-first-of-type-selector – Andy Jan 17 '17 at 12:30
  • Editted my question @Pekka웃 – FreshPro Jan 17 '17 at 12:30

2 Answers2

5

You can select first li and then find first img inside it and remove it DEMO.

$('.products li').first().find('img').first().remove()

Another way to do this is

$('.products li:first img:first').remove()
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
2

This works for me, where I look for the first direct child img of the first .featured-image element

jQuery (document).ready(function(){
    jQuery('.featured-image:first > img:first').remove();
});
Alex
  • 23,004
  • 4
  • 39
  • 73