FAQ: Javascript and the DOM - Remove an Element

Simple,

document.querySelectorAll('p')
1 Like

This. I also don’t understand why the getElementById doesn’t work here, and I am forced to use querySelector. From previous exercises I thought I understood that they can be used interchangeably? What am I missing?

1 Like

I think it should be parent.removeChild(child); instead of .removeElement

Nevertheless, it doesn’t work as well:

let delete = document.getElementById(‘oaxaca’);

document.getElementById(‘more-destinations’).removeChild(delete);

I really don’t get it… Why use query selector to select an ID when there is getElementbyId? Would be great if somebody could eyplain me what I’m doing wrong.

Thanks :slight_smile:

1 Like

I agree with you 100%. Codecademy’s “teaching” style is less than ideal (for me, anyway). They often provide examples that don’t apply to the exercises while also going out of their way to NOT provide examples that would/do apply. Causes me to utilize it as a teaching/learning resource less and less.

Teaching is something you love and are good at. I know because I come from a family of educators, and I’m married to one of the best educators I’ve ever known (I’ve audited countless courses as well as taken a good many classes in my time, and I speak from experience).

A good teacher would never try to trick a student (certainly never when they’re first learning a concept and, if ever utilized as tool during a review you would always give a head’s up / tip a student off. The way Codecademy presents many of lessons and exercises is totally counter to the best teaching (learning) methods. Therefore, if you continue on this platform, which I will do because I’ve worked really hard, struggled to learn what I have and want to continue this journey (the community here is second to none!), you may come to the realization, as I have, that it’s necessary to supplement the information provided here by seeking more supportive and traditional learning experiences on other platforms, via other teachers. For me I have to need to have working examples, and I highly value and appreciate the metaphors and analogies which are typically incorporated generously in most high-level math and science courses at the better universities and institutes of learning.

Don’t get me wrong: there is much value here, but for me as one who struggles with learning coding languages, if the discussion forums didn’t exist (and if my spouse wasn’t a programmer and educator), Codecademy would be practically useless.

Just my two cents.

3 Likes

Hi,
In the ‘Remove an Elelment’ exercise Codecademy proposes a solution using the querySelector() method. I’ve tried the same code with the getElementById() function and it doesn’t return an error, but it doesn’t remove the targeted element neither. Is it ok to assume that the getElementById() method does not work for removing elelments?

Thank You

Either form of caching a node will work. The thing to note is that we are removing a child node from a parent node. Once removed it can only be replaced by appending the child node to the parent node.

So long as the node is still referenced, it will survive in memory for the duration of the session.

Thank you very much for your help!

1 Like

document.getElementById('sign').hidden = true;

The code above did not remove the element from the DOM, but rather hid it. This is not the same as setting the CSS visibility property to hidden.

How is it different? When would you use the DOM manipulator when would you use the CSS visibility property?

I believe I’ve discovered a bug in the checking of this exercise. I attempted to complete the exercise with the following two methods:

First:

let location = document.getElementById('oaxaca');
let parent = document.getElementById('more-destinations');
parent.removeChild(location);

Second:

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

Both of these methods failed when submitting. However, when the variable name location is changed to child it passes with both options. Is there something in the code checker that looks for the variable to be named only certain things? Or is ‘location’ a protected word?

Either way, it caused me way too much trouble to try to sort it out!

2 Likes

This particular lesson is expecting the variables, child and parent, which makes sense since we are talking about inheritance and lineage of HTML.

Fair enough, but I think that those variable names should be stated in the instructions then, as is the case with many other exercises.

1 Like

Yeah, I see there is no mention of variable names.

WHAT is the difference between: javascript’s .hidden boolean property, display: none, and visibility: hidden?

Did anyone else try getElementById instead of querySelector? Not sure why this didn’t work.

Amen, 100%. And I’m not uneducated, have 2 majors and 1 masters degree.

I agree with the tricking in this lesson and that it happens regularly in Codecademy. They don’t have to give us the answer, but show us more examples of how manipulatable/powerful querySelector & getElementById are, then we can see how we can adjust to complete the lesson.

Codecademy is a rabbit hole. All the better. Those who succeed along its paths might be the better for it since they don’t expect to be led.

This is exactly how I feel now. :pensive:

Anyway, this is my solution:

let child = document.getElementById('oaxaca')
let parent = child.parentElement

parent.removeChild(child);