Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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.

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.

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

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.

Thanks.