hide href element in specific UL with javascript

Question

How we can hide href element in specific UL element ( not in all UL elements, because UL elements are with the same name).

For example we have HTML code like this:

<ul class="UL_tag">
  <li>Text 1</li>
  <li>Text 2</li> 
  <li><a href="http://www.google.com" class="description">Link to GOOGLE</a></li>
</ul>   

<ul class="UL_tag">
  <li>Text 1</li>
  <li>Text 2</li> 
  <li><a href="http://www.yahoo.com" class="description">Link to Yahoo</a></li>
</ul>   

And we can hide these href's by using this code:

$('a.description').hide();

How should I change this javascript code, if I want to hide just one href element which is in the one UL element? Not all href elements with the class name "description" ?

Thank you for your help!

Answer 1

You can use attr href selector:

$('a[href="http://www.yahoo.com"]').hide();

Here is an example links, which you can use with different methods:

• http://api.jquery.com/attribute-contains-selector/
• http://api.jquery.com/attribute-ends-with-selector/

And this questions also related: jQuery cant access element with its attr href // simple tabs structure

Answer 2

You should give proper id s to each <ul> :

<ul class="UL_tag" id="firstList">
  <li>Text 1</li>
  <li>Text 2</li> 
  <li><a href="http://www.google.com" class="description">Link to GOOGLE</a></li>
</ul>   

<ul class="UL_tag" id="secondList">
  <li>Text 1</li>
  <li>Text 2</li> 
  <li><a href="http://www.yahoo.com" class="description">Link to Yahoo</a></li>
</ul>

And then:

$('#firstList a.description').hide();

Answer 3

select the element by tagname and class, and then filter for href value:

$('a.description[href="http://www.google.com"]').hide();

you can also limit the result to only elements inside the class .UL_tag :

$('a.description[href="http://www.google.com"]', '.UL_tag').hide();

Answer 4

HTML :

<ul class="UL_tag">
  <li>Text 1</li>
  <li>Text 2</li>
  <li><a href="http://www.google.com" class="description">Link to GOOGLE</a></li>
</ul>   

<ul class="UL_tag">
  <li>Text 1</li>
  <li>Text 2</li>
  <li><a href="http://www.yahoo.com" class="description">Link to Yahoo</a></li>
</ul>   

Jquery:

 var d = $('.UL_tag li').children('a')[1]; // If you remove first href element  change it to value "1" to "0"
 $(d).hide();

See this Demo: http://jsfiddle.net/7aNRZ/8/

Answer 5

Thank you for your answers, I think all of these answers are also correct answers, but what I'm trying to achieve is a bit different. Actually there is 3 li elements (two of them are with href tag):

 <ul class="UL_tag"> 
   <li>There you can download something.</li> 
   <li><a href="rapidshare.com/file.zip"; class="start">Download</a></li> 
   <li><a href="google.com"; class="description">Link to GOOGLE</a></li> 
</ul>

When you click on the "Download" link, javascript will be called:

$(function(){
    var seconds = 10;
    var canClick = true;
    seconds *= 1000;

    $('a.start').bind('click', function(){
      if(canClick){
        var link = $(this).attr('href');
        var loader = $('input[name="link"]').val();

        $(this).html('<img src="' + loader + '"/>');
        setInterval(function(){
            window.location.reload();
            window.location = link; 
        }, seconds);
        // Description will be hidden everywhere.
        // How we can hide description in only one
        // row. In row where the a.start was called?
        $('a.description').hide();

        canClick = false;
        }
        return false;
    });
});

It will show the "loading gif" and after 10seconds user will beredirect to the download page.

So is it possible to hide "description" in only one row not everywhere. Just in a row where we call this "start" function?

The biggest problem is to hide just one li element, when all UL's and li's have same class name.

Answer 6

You can traverse the dom to get the element within the parent ul

$(this).parent().siblings().find('a.description').hide();
// get current clicked > parent li > siblings > find a.description in li siblings > hide

http://jsfiddle.net/CjfXu/1/

Since your li is actually wrapped inside a span also.. .parent won't work as it's getting the span element. You need to use .closest() - which gets the closest ancestor that matches

$(this).closest('li').siblings().find('.description').hide();

Also don't bind a click event inside another click event as that causes the dom to attach multiple event handlers to the element. Always bind inside the document.ready function. Dynamically created elements or when you have many elements that you need to bind, using delegation would be the most efficient way.

You had your code like this

$('a.start').bind('click', function(){ // <-- this should be $('a:not(.start)').bind 
     // code

     $('a.start').click(function(e) {            
         $(this).parent().siblings().find('.description').hide();
     });            

});

Which is binding any anchors with class=start a click event each time the first anchor is clicked

to use delegation

$('parentElement').on('click','element', function(){

})

or jQuery 1.6 and below

$('parentElement').delegate('element','click', function(){

});