Adding Child Element To A Parent Element Using Javascript

I am trying to add a child element to a parent element as follows: li to be added to ul Either when the enter button is clicked or the enter key on the keyboard is pressed, a new

Solution 1:

querySelectorAll returns NodeList. NodeList does not contain appendChild method. So either try to replace ul.appendChild with ul[0].appendChild or just refactor your code

Solution 2:

This solution modifies your item-adding code to include a delete button (and refactors the code into a dedicated function.)

All delete buttons (marked with a "delete-btn" class) trigger list-item removal. (The click event bubbles up to the ul, where the listener is attached.)

See the in-code comments for further explanation.

// Identifies DOM elementsconst
  listItems = document.querySelectorAll(".todos"),
  input = document.getElementById("userInput"),
  ul = document.getElementById("the-list"), // (NOT `querySelectorAll`)
  button = document.getElementById("enter");

// Conditionally calls addItem function when button is clicked
button.addEventListener("click", function() {
  if (input.value.length > 0) {
    addItem();
  }
});

// Conditionally calls addItem function when ENTER is pressed
input.addEventListener("keypress", function() {
  if (input.value.length > 0 && event.which === 13){
    addItem();
  }
});

// Adds an item to the list (when called by either listener)functionaddItem(){
  const
    li = document.createElement("li"),
    txt = document.createTextNode(input.value),
    btn = document.createElement("button");
  // Puts txt & btn inside li
  li.appendChild(txt);
  btn.textContent = "Delete";
  btn.classList.add("delete-btn"); // For later reference
  li.appendChild(btn);  

  ul.appendChild(li); // Puts li inside ul
  input.value = ""; // Clears input
}

// Listens for clicks on the `ul` or its descendants, even if the//   clicked element gets dynamically added later
ul.addEventListener("click", function(event) {
  // Listeners can automatically access triggering eventsconst clickedElement = event.target; // Events have a target propertyif(clickedElement.classList.contains("delete-btn")){
    // Finds ancestor elements and removes li from ulconst
      li = clickedElement.closest("li"),
      ul = li.closest("ul");
    ul.removeChild(li); // (Or we could add "done" to li's classList)
  }
});

.delete-btn{
  margin-left: 1em;
}

/*
.done {
  text-decoration: line-through;
}
*/

<h1>Simple Add/Remove Task</h1><h2>To do List</h2><inputtype="text"placeholder="enter your tasks"id="userInput"><buttonid="enter">Enter</button><ulid="the-list"><liclass="todos">Wake up<buttonclass="delete-btn">Delete</button></li><liclass="todos">Study<buttonclass="delete-btn">Delete</button></li></ul>

Solution 3:

Change this,

var ul = document.querySelectorAll("ul");

to this,

var ul = document.querySelector("ul");

As you have only one ul in your html.