Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML jQuery Basics (2014) Introduction to jQuery What is jQuery?

Posted by Daniel Deng
Daniel Deng
Courses Plus Student 4,322 Points

How to make a link hide itself after clicked it

My js code:

$("li.li0104").hide().parent().before(
"<a id='aa0104' href='#aa0104'>Show Tech Giants</a>"
);

$("#aa0104").click(function() {
    $("li.li0104").show();
    $(this).hide();
});

My html:

<ul>
    <li class="li0104">Apple</li>
        <li class="li0104">Amazon</li>
        <li class="li0104">Google</li>
        <li class="li0104">Microsoft</li>
</ul>

Problem: The link, "Show Tech Giants", always has a light-blue color border color around it like a button. Why it that? How do I get rid of it?

Thanks.

Daniel Deng
Daniel Deng
Courses Plus Student 4,322 Points

If I replace the id with class, the light-blue color border will disappear, but then I don't know how to make the href work so that the control can still bring me to the location of the page where the link is clicked.

In the original code, it uses href="#", which I don't want it.

Daniel Deng
Daniel Deng
Courses Plus Student 4,322 Points

Ok, problem solved. I got around the use of id by doing this:

js:

$("li.li0104").hide().parent().before("

<a class='a0104' href='#Apple0104'>Show Tech Giants</a>

");

$(".a0104").click(function() { $("li.li0104").show(); $(this).hide(); });

html:

<ul>
    <li class="li0104" id="Apple0104">Apple</li>
        <li class="li0104">Amazon</li>
        <li class="li0104">Google</li>
        <li class="li0104">Microsoft</li>
</ul>

Now everything works!

2 Answers

Oscar Armstrong
Oscar Armstrong
10,462 Points
Oscar Armstrong
Oscar Armstrong
10,462 Points

Hello, glad you got it figured out. Here's my 2 cents: It looks like the main problem was trying to assign a click event to objects that are not in the DOM yet. A good habit to get into is to use the delegate to assign events with jquery, this will assign the event whether the object is actually in the DOM at the time or not, for example:

$(document).on('click', '#aa0104', function() {
    // do stuff
});

Another thing to note about html id is that it should be unique across the entire html page, otherwise jquery won't work on it as expected, if at all.

Daniel Deng
PLUS
Daniel Deng
Courses Plus Student 4,322 Points
Daniel Deng
Daniel Deng
Courses Plus Student 4,322 Points

Thanks.