FAQ: Javascript and the DOM - Remove an Element

[wiki-bot]

This community-built FAQ covers the “Remove an Element” exercise from the lesson “Javascript and the DOM”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Remove an Element

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!

Agree with a comment or answer? Like () to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

[gravelnut]

I am confused by this section Remove an Element:

The lesson states to do these three steps:

• Select the element with the ID oaxaca and save it to a variable.
• Select its parent, assigned an ID of more-destinations .
• Remove the element using the .removeChild() method and passing in the variable containing the oaxaca element.

Here is the code I came up with:

let whatThe = document.getElementById('oaxaca');
document.querySelector('more-destinations');
document.moreDestinations.removeChild(whatThe);

Here is what the hint suggested:

let paragraph = document.querySelector('p');
document.body.removeChild(paragraph);

However, the Codecademy solution appears to not follow the lesson. Here is the solution:

const parent = document.querySelector("#more-destinations");

const child = document.querySelector("#oaxaca");

parent.removeChild(child);

The issue I am having is that the instructions state that I should:
" Select the element with the ID oaxaca and save it to a variable."

The Codecademy solution skips selecting the element by ID and uses the CSS selector method instead… What am I missing?

[mtf]

@gravelnut

document.querySelector(‘more-destinations’);

When we query a selector it either needs assignment to a variable or be written as the argument in a method call. The solution illustrates assignment.

@gravelnut

" Select the element with the ID oaxaca and save it to a variable. "

Witness what the solution shows. child is the variable, `#oaxaca’ is the child node within the parent node.

[gravelnut]

Okay, I understand now. Thank you for explaining it for me

I found this article helpful in grasping the lesson…

[netace86605]

If you look at the index.html it will make sense because they want you to use the DOM. The id=more-destinations comes before the id=oaxaca, so that’s why they want you to start from the parent the go down; however, I reversed the two and it still works. Creating variable for the parent and the child makes the code look cleaner and not too long. The last step is self explanatory

[gravelnut]

Thank you. That makes total sense

[data7096341613]

Took me awhile to figure out a solution to this exercise. After reading through this thread and also the proposed solution, it decided to try to follow the sequential steps given.

I came up with this solution… I believe it is valid, but would like to know what are the advantages of the proposed solution compared to this.

let child = document.querySelector(’#oaxaca’);
document.querySelector(’#more-destinations’).removeChild(child);

Proposed solution:
const parent = document.querySelector("#more-destinations");
const child = document.querySelector("#oaxaca");
parent.removeChild(child);

[mtf]

@data7096341613

const child = document.querySelector(“#oaxaca”);
parent.removeChild(child);

After we remove the child, what happens to the reference? How can we even change it, being as it is a constant? let might allow this.

const parent = document.querySelector('#more-destinations');
parent.removeChild(document.querySelector('#oaxaca'));

Now only the parent is still referable in memory, and will remain so, as a constant. There are no references to the removed element. We can add to and remove elements from the parent as much as we like.

[davidwenmimikyu2882]

const parent = document.querySelector("#more-destinations");

const child = document.querySelector("#oaxaca");

parent.removeChild(child);
I wanted to know why “#” is needed for this to work

[midlindner]

The # tells document.querySelector() that you are looking for an element with an id of ‘oaxaca’. If you wanted to select an element by its class instead of id, you would use . like so: document.querySelector('.title').

[jefferymuter04082711]

Yeah this one wasn’t thought out too well. I cheated and went to the ‘solution’. And got very confused when I realized they never gave an example looking anything like that lol

[danielr3941652699]

Since both oaxaca and more-destinations are unique ID’s within the HTML file couldn’t we target those ID’s and accomplish the same results removing the paragraph? This is what I was thinking of

l et child= document.getElementbyId(‘#oaxaca’)
let parent= document.getElementbyId(‘#more-destinations’)
parent.removeChild(child)

However I get the error below.
Did you remove the #oaxaca element from the parent #more-destinations ?

[mtf]

@danielr3941652699

l et child= document.getElementbyId(’#oaxaca’)

We do not use the CSS syntax in getElementById.

document.getElementbyId(’oaxaca’)

or,

document.querySelector('#oaxaca')

which does expect CSS selector syntax.

[jparrs]

Does the same go for .removeChild(), in that, it doesn’t accept CSS Syntax??

I was attempting the following and getting the incorrect answer message:

var mexico = document.getElementById('oaxaca'); document.querySelector('#more-destinations').removeChild('#oaxaca');

I realised, I should have used the variable ‘mexico’ instead and the solution was accepted. Although, my first attempt still made sense to me as .removeChild(’#oaxaca’) was referencing an element ID.

[mtf]

@jparrs

Does the same go for .removeChild(), in that, it doesn’t accept CSS Syntax??

Correct. As you’ve discovered it accepts the variable name of the selected DOM node, and not a CSS selector.

[yarivshamash]

When you use document.querySelector() to select an element by it’s ID you have to use # before it’s ID just like how you would in a CSS file.

If you don’t the browser will look an element with the given string i.e. document.querySelector("oaxaca") will search for an element <oaxaca /> whereas document.querySelector("#oaxaca") will search for an element with the id="oaxaca".

[yarivshamash]

I also saw someone mentioning the order of the code line should be in a specific way. I tried it and both ways work.
I recommend using websites such as codeSandbox or similar when you get stuck because they have a console that prints errors, like in may case where I had a typo quarySelector instead of querySelector. Cought it through the console of codeSandbox.

[pywhiz00727]

The firs two lines are from the solution (with a small edit). The last two lines are mine. Why doesn’t it work?

[digitaldevourer]

I’m also confused on this topic.
I used the code:

let oaxaca = document.getElementById('oaxaca');
document.body.removeChild(oaxaca);

But I couldn’t get the expected results. The provided answer doesn’t really help, since they use two variables, whereas the provided examples use a single-line notation style.

What I’m wondering is, am I simply getting the concept wrong? could something like this work in place of my other attempt:

let parent = document.getElementById('more-destinations');
let child = document.getElementById('oaxaca');
parent.removeElement(child);

Or is this one of those weird cases where method selectors can’t be used with parentheses, and so we have to use [square brackets ] in their place?

Thoughts:

Personally, I think the official answer is rather long and inelegant to achieve something that seems rather simple. IDK, there must be a simpler way to remove a single item.

const parent = document.querySelector("#more-destinations");

const child = document.querySelector("#oaxaca");

parent.removeChild(child);

[jnijnijni]

When the exercise 6, it says that .querySelector(‘p’) chooses the first paragraph it sees, so how will I be able to select other p elements other than the first one?