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 Introduction to jQuery DOM Traversal parent()

Derick Brown
Derick Brown
7,361 Points
Posted by Derick Brown
Derick Brown
7,361 Points

The '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 &lt;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
Kenneth Kim
3,795 Points
Kenneth Kim
Kenneth Kim
3,795 Points

Hi 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
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Where 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
Derick Brown
7,361 Points
Derick Brown
Derick Brown
7,361 Points

Sorry, 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">&times;</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
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The 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
Derick Brown
7,361 Points
Derick Brown
Derick Brown
7,361 Points

So I pretty much need to put the:

$('.close').on('click', function() {
  $(this).parent().remove();
});

Inside of the event handler for "add-pet"?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

That 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
Derick Brown
7,361 Points
Derick Brown
Derick Brown
7,361 Points

Ahh 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
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Take a closer look at the video. I believe it is indeed inside the other handler.