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 daniel steinberg
daniel steinberg
14,651 Points

How to remove item using jQuery

I am trying to create a simple todo list using jQuery. For adding items, the append part works fine. I can't get the delete item ( $(this).remove();) to work

PLEASE help.. here is the code:

todo.js

$(document).ready(function() { $('#button').click(function() { var toAdd= $('input[name=checkListItem]').val(); $('.list').append('<div class="item">' + toAdd + '</div>') });
$(document).on('click',".item",function(){ $(this).remove(); });

});

todo2.css

h2 { font-family:arial; }

form { display: inline-block; }

button{

display: inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;

}

.list { font-family:garamond; color:#cc0000;

}

todo2.html

<!DOCTYPE html> <html> <head> <title>To Do</title> <link href="todo2.css" rel="stylesheet"> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script src="todo2.js"></script> </head> </script> </head> <body> <h2>To Do</h2> <form name="checkListForm"> <input type="text" name="checkListItem"/> </form> <div id="button">Add!</div> <br/> <div class="list"></div> </body> </html>

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");
  //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>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>

1 Answer

Stephen Gheysens
Stephen Gheysens
11,935 Points
Stephen Gheysens
Stephen Gheysens
11,935 Points

Hi Daniel,

I think you're trying to do more than they're asking for this one :)

The two steps in this challenge are just updates to app.js on lines 11 and 13. The updates are pretty simple, and I think you'll know which functions to use, but comment back if you're still having trouble!

Thanks, Stephen