Bummer! You must be logged in to access this page.

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

Killeon Patterson
Killeon Patterson
18,528 Points
Posted by Killeon Patterson
Killeon Patterson
18,528 Points

Logic for my remove button

I'm attempting to create a button to remove the new buttons that I've created on my page. My remove button function needs work. How can I delete the buttons I've created?

HTML``` <!DOCTYPE html> <html> <head> <title>JavaScript and the DOM</title> <link rel="stylesheet" href="css/style.css"> </head> <body>

  <button class="description">new button</button>
 <button class="remove">remove button</button>

<script src="app.js"></script>

</body> </html>

JAVASCRIPT ```
const newButton = document.querySelector('button.description');
const removeButton = document.querySelector('button.remove');




           newButton.addEventListener('click', () => {
                  let ul = document.getElementsByTagName('body')[0];
                  let li = document.createElement('button');
                  li.textContent = 'New Button';
                  li.className = 'new';
                  li.style.color = 'pink';
                  ul.appendChild(li);
});


            removeButton.addEventListener('click', () => {
                let ul = document.querySelector('body');
                let li = document.querySelector('button.new');
                ul.removeChild(li);
});
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:information_source: The characters for code quoting should be accents/backticks (```), not apostrophes(''').

:point_right: And they go before the language or file name.

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Here's a few hints:

  • on line 2 you spelled "removeButtom" (with an "m") instead of "removeButton"
  • in the removebutton click handler, you should not have an index with querySelector
  • if you want to remove only the new buttons, you might give them a different class (such as "new")
  • you could then add the new class to the querySelector argument ("button.new")
Killeon Patterson
Killeon Patterson
18,528 Points
Killeon Patterson
Killeon Patterson
18,528 Points

Hi Steve,

Thank you for pointing out that "removeButton" bug.

The click handler - I changed my new buttons to hold the className of 'new' and I tried the querySelector index. The logic still isn't working. Also, I tried adding "last-child" to the selector. Do you have any other ideas?

Thank you for your help.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: You may have overlooked my 2nd suggestion above.

  • in the removebutton click handler, you should not have an index with querySelector

So the code would be:

            let ul = document.querySelector('body');   // <- index was removed here