Remove an element when button clicked

Question

I've been trying to make simple to-do list to learn javascript and I have been able to add and display a task but I can't find a way to delete it. I have created a remove button but I can't make work, nothing happens when clicked. So any help would be great, thanks !

function handleSubmit(event){

    event.preventDefault();

    let value = getInputValue();

    if(value !== false){


        addToDom(value);

     
        eraseInput();
    }
}

const form = document.querySelector("#todo-list-form");
form.addEventListener('submit', handleSubmit);

function getInputValue() {
    const input = document.querySelector("#todo-input");

    let value = input.value;

    value = value.trim();

    if (value === '') {
        alert("You can not submit an empty field");
        return false;
    }
    else {
        return value;
    }
}

function addToDom(value) {
    const list = document.querySelector("#list");
    const removeButton = document.createElement("button");
    removeButton.innerHTML = 'remove';
    removeButton.classList.add("complete-btn");
    list.appendChild(removeButton);
    list.innerHTML += "<li>" + value + "</li>";
    console.log(list);
    removeButton.addEventListener('click', removeItem)
}

function removeItem(event){
    event.parentElement.remove();

}

function eraseInput() {
    const input = document.querySelector("#todo-input");

    input.value = "";

    input.focus();
}

Answer 1

The issue is because you define and add the removeButton to the DOM, but immediately after that you overwrite the HTML of the parent element, which removes the button.

To fix the issue you need to be consistent in how you create and append the elements to the DOM.

In addition, as @Teemu pointed out in the comments, you need to use event.target.parentElement in your removeItem() function.

function addToDom(value) {
  const removeButton = document.createElement("button");
  removeButton.innerHTML = 'remove';
  removeButton.classList.add("complete-btn");
  removeButton.addEventListener('click', removeItem);
  
  const li = document.createElement('li');
  li.textContent = value;
  li.appendChild(removeButton);

  document.querySelector("#list").appendChild(li);
}

function removeItem(event){
  event.target.parentElement.remove();
}

Here's a full working example:

function handleSubmit(event) {
  event.preventDefault();

  let value = getInputValue();
  if (value !== false) {
    addToDom(value);
    eraseInput();
  }
}

const form = document.querySelector("#todo-list-form");
form.addEventListener('submit', handleSubmit);

function getInputValue() {
  const input = document.querySelector("#todo-input");

  let value = input.value;
  value = value.trim();

  if (value === '') {
    alert("You can not submit an empty field");
    return false;
  } else {
    return value;
  }
}

function addToDom(value) {
  const removeButton = document.createElement("button");
  removeButton.innerHTML = 'remove';
  removeButton.classList.add("complete-btn");
  removeButton.addEventListener('click', removeItem);

  const li = document.createElement('li');
  li.textContent = value;
  li.appendChild(removeButton);

  document.querySelector("#list").appendChild(li);
}

function removeItem(event) {
  event.target.parentElement.remove();
}

function eraseInput() {
  const input = document.querySelector("#todo-input");
  input.value = "";
  input.focus();
}

ul button { margin: 0 0 0 5px; }

<form id="todo-list-form">
  Item: <input type="text" id="todo-input" />
  <button type="submit">Add</button>
  <ul id="list"></ul>
</form>