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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Appending and Removing Elements

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points
Posted by Stephen Printup
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Perform: Appending and Removing Elements; Challenge 1 of 2

Take a look around at the app.js and index.html files. In this task we're going to remove the pleaseEnableParagraph from the body. Do that around line 7.

I've tried both:

var body = document.body;
var newParagraph = document.createElement("p");
var pleaseEnableParagraph = document.querySelector("#please_enable");

//Remove "Please Enable JavaScript" paragraph
var deleteTask = function () {
    var listItem = this.parentNode;
    var ul = listItem.parentNode;
    ul.removeChild (pleaseEnableParagraph);
}
//Append new paragaph to document

and 

var body = document.body;
var newParagraph = document.createElement("p");
var pleaseEnableParagraph = document.querySelector("#please_enable");

//Remove "Please Enable JavaScript" paragraph
var deleteTask = function () {
      body.removeChild (pleaseEnableParagraph);
}
//Append new paragaph to document

The index markup is

<!DOCTYPE html>
<html>
  <body>
    <p id="please_enable">Please Enable JavaScript</p>

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

I've looked on MDN and found ChildNode.remove() but it says it is an experimental technology. Will someone please help me? Thank you.

4 Answers

Jeff Busch
Jeff Busch
19,287 Points

Hi Stephen,

You're over-thinking it. Try this:

body.removeChild(pleaseEnableParagraph);

Jeff

Rich Braymiller
Rich Braymiller
7,119 Points
Rich Braymiller
Rich Braymiller
7,119 Points

Yeah well Andrew makes one over think. MY least favorite instructor on Treehouse.

Russell Roberts
Russell Roberts
21,482 Points
Russell Roberts
Russell Roberts
21,482 Points

I probably was over thinking it as well because did the same thing. Thanks for the help.

Michael Brown
Michael Brown
17,651 Points
Michael Brown
Michael Brown
17,651 Points

The answer is body.removeChild(pleaseEnableParagraph); A lot of times an error occurs is usually a typo. That's why it doesn't work for me most of the time.

Larry Singleton
Larry Singleton
18,946 Points
Larry Singleton
Larry Singleton
18,946 Points

This is what worked for me. This part is the most confusing for me.

var body = document.body; var newParagraph = document.createElement("p"); var pleaseEnableParagraph = document.querySelector("#please_enable");

//Remove "Please Enable JavaScript" paragraph

body.removeChild(pleaseEnableParagraph);

//Append new paragaph to document