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

JavaScript jQuery Basics (2014) Creating a Spoiler Revealer Using remove()

Posted by Connor Sage
Connor Sage
9,577 Points

I am really stuck, so stuck, please help.

I need to integrate

js/app.js 
//Prevent spoilerphobes from seeing spoilers
//Solution: Hide spoilers and reveal them through user interaction

//1, Hide spoiler
$(".spoiler span").hide();
//2, Add a button
$(".spoiler").append("<button>Reveal Spoiler!</button>");
//3, When button pressed
$("button").click(function(){
  //3.1, Show spoiler
  $(".spoiler span <span></span>"); 
  //3.2, Get rid of button
  $(this);
});
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Star Wars Spoilers</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <img src="img/deathstar.png" />
    <p class="spoiler">
        <!--Spoiler:-->
        <span class="spoiler">Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    </p>
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Steve Brewer
Steve Brewer
15,030 Points
Steve Brewer
Steve Brewer
15,030 Points

You just need to use .show on the spoiler class:

//Prevent spoilerphobes from seeing spoilers
//Solution: Hide spoilers and reveal them through user interaction

//1, Hide spoiler
$(".spoiler span").hide();
//2, Add a button
$(".spoiler").append("<button>Reveal Spoiler!</button>");
//3, When button pressed
$("button").click(function(){
  //3.1, Show spoiler
  $(".spoiler span").show("<span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>");
  //3.2, Get rid of button
  $(this);
});

2 Answers

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

You're missing the show method and the remove method.

Should look like this:

//Prevent spoilerphobes from seeing spoilers
//Solution: Hide spoilers and reveal them through user interaction

//1, Hide spoiler
$(".spoiler span").hide();
//2, Add a button
$(".spoiler").append("<button>Reveal Spoiler!</button>");
//3, When button pressed
$("button").click(function(){
  //3.1, Show spoiler
  $(".spoiler span").show();
  //3.2, Get rid of button
  $(this).remove();
});
Joni Laukkonen
Joni Laukkonen
15,429 Points
Joni Laukkonen
Joni Laukkonen
15,429 Points

Yea so as stated above only issues are on the click function. I added some commenting on the lines you had issues with just in case.

So what you got now:

$("button").click(function(){
  //3.1, Show spoiler
  $(".spoiler span <span></span>");  // SEE CORRECT WAY BELOW
  //3.2, Get rid of button
  $(this); // MISSING BUTTON REMOVAL
});

So instead you'd need to have this:

$("button").click(function(){
  //3.1, Show spoiler
  $(".spoiler span").show();  // so first target the element .spoiler and span tag in it and use the .show() method on that
  //3.2, Get rid of button
  $(this).remove(); //this targets the element that triggered the function, in this case button that is clicked and then the remove() is used on that
});