Remove first img in first li element with jquery

Question

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.

Answer 1

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()

Answer 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();
});