About Document.querySelector() - Javascript and DOM


#1

https://www.codecademy.com/paths/web-development/tracks/building-interactive-javascript-websites/modules/web-dev-interactive-websites/lessons/javascript-dom/exercises/remove-element

answer of this is:
const parent = document.querySelector("#more-destinations");
const child = document.querySelector("#oaxaca");
parent.removeChild(child);

Can It be shortened the way this does:
var el = document.querySelector(“div.user-panel.main input[name=login]”);

If it is possible, can you tell me how to?
I tried to copy the form of it, but failed.


#2

This is without context, so hard to discuss. The selector is rather specific, and perhaps unnecessarily so. From what we can tell, there is only one form control with the attribute name=login so that is specific enough for the selector.

In the case of this exercise, the id attributes are the simplest selectors.

A shorter form of solution would be,

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

#3

thank you for the answer!

looking at the shorter solution helped me understand some of the DOM stuff.