Is it possible to remove the child elements of the Ul I have with my code?


On each click of the deleteButton, I want to be able to remove the span and li element from my ul. Here is my code:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src=""></script>
  <link rel="stylesheet" href="style.css">
  <title>Todo List</title>
  <div id="container">
    <h1>To-do List</h1>
    <input type="text" id="textArea"><button id="submit">+</button>
    <ul id="task-list">
  <script src="script.js"></script>
let textArea = document.getElementById('textArea');
let submit = document.getElementById("submit")
let ul = document.getElementById("task-list");
let deleteButton = document.getElementsByClassName("deleteButton");

//add todo
submit.addEventListener("click", function(){
  let listItem = document.createElement("li");
  let val = textArea.value;
  listItem.innerHTML = `<button class="deleteButton">X</button> ${val}`;
  textArea.value = "";

//delete todo
deleteButton.addEventListener("click", function(){

Is it possible with something like I have setup here? Sorry about asking, but I am just stuck and want to become unstuck. I am thinking that using removeChild may work. However, I don’t think it can take both the span and li elements away at the same time.

This will get you going.

The best way to approach this is to not think of your program in large chunks.
Think smaller and tackle it from there.

So you want to remove an element from the <ul> list.
Try first populating a <ul> list and then find some code that can enable you to remove one li element.

When an li element is remove, all the children goes with it.

This is how I will break down the problem.

  • First, I need to know how to remove an element. It doesn’t matter which one, I need to know the “how”
  • Second, once I have that figured out. I will attach that code with an eventListener to have it repeated.
  • Third, clean up the code and add new features.

Hope that will spark some ideas for you to approach this problem.