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
Derick Brown
7,361 PointsThe 'x' removal code not working
For the life of me I can't seem to get this code to work. I swear I copied everything letter for letter.
Here is the line of code we were instructed to add:
// Make the 'x' in the corner remove the section it's contained within
$('.close').on('click', function() {
$(this).parent().remove();
});
Here is the HTML from the post.html page the form lies:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Treehouse Pet Adoption | Post</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="container">
<h1 class="logo"><img src="images/logo.svg" /></h1>
<ul>
<li><a href="index.html">Adopt</a></li>
<li><a href="post.html">Post</a></li>
</ul>
</nav>
</header>
<h1>Post a Pet</h1>
<h2 class="page-header">List animals that need furever homes here!</h2>
<main class="container">
<form>
<div class="row">
<div class="six columns">
<label for="pet-name">Pet Name</label>
<input class="u-full-width" placeholder="Scruffy McGuffagin" id="pet-name" type="text">
</div>
<div class="six columns">
<label for="pet-species">Species</label>
<select class="u-full-width" id="pet-species">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Narwhal">Narwhal</option>
</select>
</div>
</div>
<label for="pet-notes">Notes</label>
<textarea class="u-full-width" placeholder="Plays well with…" id="pet-notes"></textarea>
<label>
<input type="checkbox" id="terms" value="terms">
<a id="terms-doc" target="_blank" href="terms.html">Read the Terms and Conditions</a>
</label>
<button type="button" id="add-pet">Add</button>
</form>
<div class="row" id="posted-pets">
</div>
</main>
<footer>
<p class="container">
Made with <3 fur puppies by <a href="#">Aisha Blake</a>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Maybe I have a spelling issue somewhere?
Please help
2 Answers
Kenneth Kim
3,795 PointsHi Derick. I came across the same problem. What Steven said is correct. If you look closely at the video, it is indeed inside the handler of the click event. In my understanding, the way our browsers work every time we refresh the page is to load the HTML page first, then load the Javascript files next wherein in those files, certain functionalities will be added to the DOM elements such as the handlers. However the 'x' button was not there initially when the page loads/refreshes. Therefore, placing the remove parent handler outside will render it useless as the 'x' button element is not there yet.
Steven Parker
229,757 PointsWhere is the element with class "close"?
You attach your click handler to the element(s) with class "close". But I don't see any elements with that class in the HTML.
Derick Brown
7,361 PointsSorry, that part is actually generated from the javascript file. Here is the code that generates the element with the "close" class:
Edit: I copied and pasted my entire code
// Grab info from the form
var $name = $('#pet-name');
var $species = $('#pet-species');
var $notes = $('#pet-notes');
$('.loc').hover(
function(){
$(this).html("<strong>Location:</strong> Your house?!");
},
function() {
$(this).html("<strong>Location:</strong> Treehouse Adoption Center");
});
// Adds a pet to the page with user input
$('#add-pet').on('click', function() {
// Assemble the HTML of our own element with the above variables
var $newPet = $(
'<section class="six columns"><div class="card"><p><strong>Name:</strong> ' + $name.val() +
'</p><p><strong>Species:</strong> ' + $species.val() +
'</p><p><strong>Notes:</strong> ' + $notes.val() +
'</p><span class="close">×</span></div></section>'
);
// Attach the new element to the page
$('#posted-pets').append($newPet);
});
// Make the 'x' in the corner remove the section it's contained within
$('.close').on('click', function() {
$(this).parent().remove();
});
// Reset form fields
$name.val('');
$species.val("Dog");
$notes.val('');
// Puppy images fade in
$('img').css('display', 'none').fadeIn(1600);
$('.card').on('click', function() {
$(this).toggleClass('selected');
});
Steven Parker
229,757 PointsThe handler(s) are only added to the elements which exist at the time the code runs. Elements added later will not have click handlers.
The code to add the handler(s) should be inside the same function that creates the new span elements.
Derick Brown
7,361 PointsSo I pretty much need to put the:
$('.close').on('click', function() {
$(this).parent().remove();
});
Inside of the event handler for "add-pet"?
Steven Parker
229,757 PointsThat should make it work, and is probably what is intended at this level of instruction.
Ideally, a handler should only be added to the newly-created element. Or perhaps even better, a single delegated handler could be set up at the beginning of the program that would handle all elements created later. These techniques will no doubt be covered later in your course or in more advanced courses.
Derick Brown
7,361 PointsAhh okay cool! I'll give this a try then.
I wonder why she put the block of code outside of the handler. Either that or I misunderstood the video and did that myself haha.
Thanks though!
Steven Parker
229,757 PointsTake a closer look at the video. I believe it is indeed inside the other handler.