We Keep Coding

Remove first img in first li element with jquery

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.

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

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

How to select element inside first-child selector jquery

Here our simple code snippet of jquery, where we want to select the p element, but what am i writing is not correct, so help us to get them.
<div class="first">
<ul class="first_ul">
<li class="first_li">
<a href="javascript:void(0)">
<div class="hello"></div>
<p class="firstP" url="hello.html">Content of First Paragrph</p>
</a>
</li>
<li class="second_li">
<a href="javascript:void(0)">
<div class="hello"></div>
<p class="firstP" url="hello2.html">Content of Second Paragrph</p>
</a>
</li>
</ul>
</div>
Here , what i am doing
$('.fist_ul .first_li:first-child p');
and actually we want to get the attribute of p element url
Thanks.

$('.first_ul .second_li p');
Seems there was misspell. And your code is not semantic, I mean, inside the <li> there is another <li> it is incorrect.

You have incorect selector . it should use :
$('.first_ul .first_li:first-child p');
Working Demo

You can try with this
$(".first_ul li").find('p')

you can try like this
$('.first_ul .first_li p').attr('url'); // for only <P> of first li's url
$('.first_ul .second_li p').attr('url'); // for only <P> of second li's url
// for all the <p> you have used in all the <li>s
$('.first_ul li p').each(function(k,v){
var wq = $(v).attr('url');
console.log(wq);
});

Find <li> tag by its child tag <a> href value

How to find Li tag which has a child tag by its Href value. By this I need to set class for that li tag.
My HTML
<div id="tabs" class="tab_wrapper">
<ul class="nav nav-tabs">
<li>Subject
</li>
<li>Contract
</li>
<li>Neighborhood
</li>
<li>Site
</li>
<li>Improvements
</li>
<li>Supplemental Data
</li>
</ul>
</div>
Css
.Active
{
color:red;
}
For example I have to set class "Active" for li tag which has href value "#tabNeighbourhood", so that li tag will be like
<li class="active">Neighborhood
</li>

Using :has() selector:
$('li:has(a[href="#tabNeighbourhood"])').addClass('active');
This will add class active to any LI containing anchor with specific href attribute.

Use .parent() :
$("ul.nav > li").removeClass("active"); // Clear all li's class attributes.
$("a[href='#tabNeighborhood']").parent().addClass("active"); // Add active to neighborhood.

$('li', '#tabs')
.filter(function() {
return !! $(this).find('a[href="#tabNeighbourhood"]').length;
})
.addClass('active');
I refer you to the official docs for explanation of the single parts.

Try Below Code
$(document).ready(function(){
$('body').find('a').each(function(){
if($(this).attr('href')=="#tabNeighbourhood"){
$(this).closest('li').addClass("Active");
}
});
});

Using your HTML structure you can use an immediate children selector >, has selector and a selector on href attribute.
Code:
$('#tabs>ul>li:has(a[href="#tabNeighbourhood"])').addClass('active');
Demo: http://jsfiddle.net/swvzot7f/

Try it by yourself. Here is an algorithm if you consider it too complex:
Search for needed <a> by attribute.
Select the parent of <a> that was found.
Add class to that parent.
Answer is pretty simple, so I do think it is much more important to show you the way of thinking instead of feeding with ready made-up solution.
EDIT
Just in case you fail I decided to add a solution too:
$( "a[href='NEEDED HREF TO SEARCH']" ).parent().addClass('active');

Another option, You can achieve by CSS alone:
a[href$='#tabNeighbourhood']
{
color:red;
}
Fiddle
JQuery method (using :has() selector):
$('ul li:has(a[href="#tabNeighbourhood"])').addClass('Active');
Fiddle

The following code (vanilla js :-) shows you how to add a class to an HTML element which ha specific href value. Just enter in the field the href value you want to search, it will add a class active, example try: #tabSubject or #tabImprovements. I hope it is what you need.
function setActive(){
var elm = document.getElementsByName('findElm')[0],
searchElm = elm.value,
targetStr = 'a[href*="' + searchElm + '"]',
target = document.querySelector(targetStr);
target.classList.add('Active');
}
.Active
{
color:red;
}
<div id="tabs" class="tab_wrapper">
<ul class="nav nav-tabs">
<li>Subject
</li>
<li>Contract
</li>
<li>Neighborhood
</li>
<li>Site
</li>
<li>Improvements
</li>
<li>Supplemental Data
</li>
</ul>
</div>
<input type="text" name="findElm" value="#tabImprovements"><br>
<input type="submit" value="Search" name="submit" onclick="setActive();">

css: Use the nth-child concept(Best Practice)
.tab_wrapper ul :nth-child(3) a {
color:red;
}

ignore child div with jquery selector

Hi Please suggest on below.
I have written
var demo= $("div#side-bar ul li").find('a').find('img').parent().text();
which works fine. But giving me output as: " maximize".
I want USERNAME_TO_PRINT in answer
<div id="side-bar" >
<ul>
<li alt="User options">
<a href="#" name="nav1">
<img alt="ppawar" src=" Myprofile.png" /> USERNAME_TO_PRINT
</a>
<div class="jx-arrow-up"></div>
<ul id="nav-1" style="display: none;">
<li>
<a href="#">
<img align="absmiddle" src="maximize.png" />
Maximize
</a>
<div class="jx-arrow-up"></div>
</li>
</ul>
</li>
</ul>
</div>

With your HTML fixed (that </div> removed), telling jQuery to find only direct descendants will get you the string you want.
var demo= $("div#side-bar > ul > li > a").text();
console.log(demo);
WORKING DEMO

There are many ways to select an element. Popnoodles' answer is correct, this will work too:
var demo = $("div#side-bar ul li a:eq(0)").text()
console.log(demo)

You can also use :first or .first().

All these loooooong hand query selectors are okay - but do you really want to write code like that ?
If you have the ability to add a name to a close element <a href="#" name="nav1"> then why not
$('a[name=nav1]').text();
Edit: missed to send the selector as a string -- thanks #pop : )

jQuery hide li tag

I've html like this. I want to only show first li tags and don't want to show span. How to do this with jquery?
<div id="div1">
<ul class="class2">
<li class="class3"><span class="sfBreadcrumbNodeSeparator">/</span> </li>
<li class="class3"> </li>
<li class="class3"> </li>
</ul>
</div>

$('.class2 li').not(':first').hide(); will hide all but the first list items, $('.class2 li:first span').hide(); will hide the span. See http://jsfiddle.net/jhfrench/agga6/4/.
Or you can do it all in one line using $('.class2 li:not(":first")' || '.class2 li:first span').hide();. See http://jsfiddle.net/jhfrench/agga6/5/

If you just want to hide the span, you can do
$('.sfBreadcrumbNodeSeparator').hide()
or give it an id value in the markup, and select based on the id value.

Hi You can use this.
$('.sfBreadcrumbNodeSeparator').hide();
or this for first li of ul
$('.class2 li:first span').hide();

You can try :
<script>
$('div#div1 ul li:first-child span').hide();
</script>