to-do list template clone ...Trying to add a click event to the templates clone delete button but not sure what direction to take

Question

I am learning template cloning in html/javascript and I am not sure what are the next steps to take to have it remove the span or the 'to do' item from the list after adding a to do item to the list...Trying to figure out how template clones work and how to manipulate the Dom through it. The goal is to eventually create a table using template clone with a to do list with more option's types,category etc etc

const form = document.getElementById('form')
const input = document.getElementById('input')
const submitButton = document.getElementById('submit-button')
const toDoList = document.getElementById('list-item-value')
const list = document.getElementById('list')
const template = document.querySelector('#list-template')

form.addEventListener('submit', (e) => {
  e.preventDefault()
  const inputItem = input.value

  renderTodo(inputItem)

  input.value = ''

  ////////
  ////////
   
})
function renderTodo(inputItem) {
  const templateClone = template.content.cloneNode(true)
  const textElement = templateClone.querySelector('[data-list-item]')
  textElement.innerText = inputItem
  list.appendChild(templateClone)
}

body {
  background-color: silver;
  font-size: 20px;
  font-family: 'Times New Roman', Times, serif;
  margin: 0 auto;
  text-align: center;
  padding-top: 20%;
}

.button {
  border-radius: 20px;
  font-weight: 300;
  border-color: wheat;
}
.button:hover {
  cursor: pointer;
}

li {
  list-style: none;
}
div:hover {
  cursor: pointer;
}

li:hover {
  cursor: pointer;
}

template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <ul id="list"></ul>
    <form action="" id="form">
      <label for="textinput">To Do</label>
      <input type="text" name="textinput" id="input" required placeholder="" />
      <button id="submit-button" class="button" type="submit">Add Task</button>
    </form>
    <div id="div"></div>
    <template id="list-template">
      <li id="list-item">
        <label for="list-item">
          <input type="checkbox" />
          <span id="list-item-value" data-list-item></span>
        </label>
        <button id="delete-button" data-delete-button="">Delete</button>
      </li>
    </template>
  </body>
</html>

to-do list template clone ...Trying to add a click event to the templates clone delete button but not sure what direction to take

0 Answers0