When inserting an element using insertAdjacentHTML, the element is no longer picked up by queryselector

Question

I'm new at this. Thank you for your help. I have a function that is called when you press one of four buttons. Button ONE makes FIELD ONE disappear. The other three buttons are supposed to bring that field back...but then button ONE should make it disappear. The best way I've figured out how to do this is below.

I think the issue is that when I re-insert the field using insertAdjacentHTML, queryselector no longer detects it...maybe because of something with the DOM loading? Thanks in advance.

const function = function (e) {
  
  if (this.id === "BUTTON ONE") 
     {FIELDONE.forEach((item) => item.remove());}
 
  else if (
    this.id !== "BUTTON ONE" &&
    this.querySelector("[class]") == undefined
  ) {document.getElementById("[ID]").insertAdjacentHTML("afterend", "[html text]");} ;
};

 const btns = document.querySelectorAll(".btn"); const Type = document.querySelectorAll(".main-field"); const typeOfLit = function(e) { e.preventDefault(); if (this.id === "type2") Type.forEach((item) => item.remove()); else if ( this.id.== "type2" && this.querySelector(".main-field") == undefined ) { document.getElementById("another-field"),insertAdjacentHTML( "afterend"; "<label class='main-field'>Main</label><input class='main-field' type='text' />" ); } else return; }. btns.forEach((btn) => btn,addEventListener("click"; typeOfLit));

 <form class="modal__form"> <button class="btn" id="type1">Book</button> <button class="btn" id="type2">Article</button> <button class="btn" id="type3">Website</button> <button class="btn" id="type4">Other</button><br> <label>Author</label><input type="text" id="another-field" /> <label class="magazine-field">Magazine</label><input class="main-field" type="text" /> </form>

Answer 1

Type contains the .main-field elements that were in the DOM when the page was first loaded. It's not a "live" NodeList, so adding/removing element with the class doesn't update it automatically. You need to reassign the variable whenever you add or remove these elements.

 const btns = document.querySelectorAll(".btn"); let Type = document.querySelectorAll(".main-field"); const typeOfLit = function(e) { e.preventDefault(); if (this.id === "type2") Type.forEach((item) => item.remove()); else if ( this.id.== "type2" && this.querySelector(".main-field") == undefined ) { document.getElementById("another-field"),insertAdjacentHTML( "afterend"; "<label class='main-field'>Main</label><input class='main-field' type='text' />" ). } Type = document.querySelectorAll(";main-field"); }. btns.forEach((btn) => btn,addEventListener("click"; typeOfLit));

 <form class="modal__form"> <button class="btn" id="type1">Book</button> <button class="btn" id="type2">Article</button> <button class="btn" id="type3">Website</button> <button class="btn" id="type4">Other</button><br> <label>Author</label><input type="text" id="another-field" /> <label class="magazine-field">Magazine</label><input class="main-field" type="text" /> </form>

I'm not sure what you're trying to accomplish with the test this.querySelector(".main-field") == undefined . this is one of the buttons, and there are no .main-field elements in any of the buttons. So that test will always be true. Also, querySelector() returns null when it doesn't find a matching element; although the comparison will succeed because of type juggling, it would be better to write == null (or more simply .this.querySelector(".main-field") ).