How to delete div in to do list?

Question

i have problem with delete items in my To Do List app.

How i can delete items?

I think i need set display:none; on parent of delete button, but i need some help with this.

How i can select parent of button?

I do some research and probably i need use this., but i don't know how to use it.

Adding task's works pretty good.

My code:

HTML:

<div class="form">
    <input type="text" id="toDo" placeholder="To do...">
    <button id="addToDo">Add</button>
</div>

<div class="list">
    <div class="toDo">
        <p>Do homework</p>
        <button id="delToDo">Delete</button>
    </div>
    <div class="toDo">
        <p>Do smth</p>
        <button id="delToDo">Delete</button>
    </div>
</div>

JS:

const addButton = document.querySelector("#addToDo");
const delBtn = document.querySelector("#delToDo");

addButton.addEventListener("click", addTask, false);
delBtn.addEventListener("click", delTask, false);

function addTask() {
    const textToDo = document.querySelector("#toDo").value;
    var list = document.querySelector(".list");

    var divToDo = document.createElement("div");
    var p = document.createElement("p");
    var delButton = document.createElement("button");

    divToDo.setAttribute("class", "toDo");
    delButton.setAttribute("id", "delToDo");

    delButton.textContent = "Delete";
    p.textContent = textToDo;


    divToDo.appendChild(p)
    divToDo.appendChild(delButton);

    list.appendChild(divToDo);
}

function delTask() {

}

Your ids should be unique. Use classes instead. – Andy Jan 19 '19 at 19:18 — Andy, Jan 19 '19 at 19:18

score 0 · Answer 1 · answered Jan 19 '19 at 19:25

This should get you in the right direction. e is the event passed from the handler and it has a property target (which will be your button), all elements also have a parent (which will be the div)

function delTask(e) {
  e.target.parent.style.display = 'none';
}

But as comment above your ID's need to be unique

score 0 · Accepted Answer · answered Jan 19 '19 at 19:26

You could assign a onclick event to the button right after you create it and before you add it to the div. The handler is just a function where you remove the created elements. You can check the code below.

I also replaced one of your lines with delButton.classList.add("id", "delToDo"); since the IDs of the DOM elements should be unique.

const addButton = document.querySelector("#addToDo");
const delBtn = document.querySelector("#delToDo");
addButton.addEventListener("click", addTask, false);

function addTask() {
  const textToDo = document.querySelector("#toDo").value;
  var list = document.querySelector(".list");

  var divToDo = document.createElement("div");
  var p = document.createElement("p");
  var delButton = document.createElement("button");

  divToDo.setAttribute("class", "toDo");
  delButton.classList.add("id", "delToDo");

  delButton.textContent = "Delete";
  p.textContent = textToDo;

  delButton.onclick = function() {
    divToDo.parentNode.removeChild(divToDo);
  }

  divToDo.appendChild(p)
  divToDo.appendChild(delButton);
  list.appendChild(divToDo);
}

.toDo {
  width: 200px;
  height: 80px;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  background-color: yellow;
}

<div class="form">
  <input type="text" id="toDo" placeholder="To do...">
  <button id="addToDo">Add</button>
</div>

<div class="list">

</div>

Cheers!

Andy · Answer 3 · 2019-01-19T19:34:20.867

Instead of ids use classes on the delete buttons. Then attach an event listener to the element with the list id to catch click events that bubble up the DOM from the buttons. Attaching single listeners to parent elements to catch the events of multiple children is called "event delegation". If you want to remove an element you can simply remove it from the DOM.

// Grab the list container and add a listener to it
const list = document.querySelector('.list');
list.addEventListener('click', handleClick, false);

function handleClick(e) {

  // Destructure the clicked element and grab its
  // classList and parentNode
  const { classList, parentNode } = e.target;

  // If the button is a "delete todo" button
  if (classList.contains('delToDo')) {

    // Remove the todo completely from the DOM
    list.removeChild(parentNode);
  }
}

<div class="list">
  <div class="toDo">
    <p>Do homework</p>
    <button class="delToDo">Delete</button>
  </div>
  <div class="toDo">
    <p>Do smth</p>
    <button class="delToDo">Delete</button>
  </div>
</div>

score 0 · Answer 4 · answered Jan 19 '19 at 19:29

Well, you made it really hard on yourself by using the same id attribute value twice. The rule is that every element that can have an id attribute should either have a unique id attribute value, or no value at all.

If you want to reuse values, you would want to use the class attribute instead of the id attribute.

The basic idea is to (1) write javascript that watches for when someone clicks on the button, and then (2) find the element to remove, and then (3) remove it.

To watch for clicks, you setup a listener function and register it for each button. Right now it looks like you know how to setup a listener function and register it, but you are only adding the function to the first button. You have to specifically and explicitly attach the listener to every single element (or technically a container but that is pedantic). Because you only attach the listener to one button, it will only work for that one button, and will not work for the other buttons.

So to fix that, look for all the buttons. Something like this (once you change id to class):

var buttons = document.querySelectorAll('.delTodo');
for(var button of buttons) {
  button.onclick = deleteTask;
}

Second, when someone clicks, you want to find what they clicked. It just so happens that when the listener function is called as a result of a click, it gets an event parameter, and in this event parameter you can find what was clicked:

function deleteTaskOnClick(event) {
   // Find what was clicked. It is already found for us.
   var theButtonThatWasClicked = event.target;
}

Third, now you need to remove an element. Every element in the document object module is an object, with methods. One of the methods is remove(). So you simply call the remove method of the element to detach it.

function deleteTaskOnClick(event) {
   var button = event.target;

   // Find the containing element that represents the todo item as a whole
   var todoElement = button.parentElement;

   // Remove the containing element
   todoElement.remove();
}

Mario · Answer 5 · 2019-01-19T19:40:49.853

Try this

const addButton = document.querySelector("#addToDo");
const list = document.querySelector(".list");

addButton.addEventListener("click", addTask, false);
list.addEventListener("click", delTask, true);

function addTask() {
    const textToDo = document.querySelector("#toDo").value;
    var list = document.querySelector(".list");

    var divToDo = document.createElement("div");
    var p = document.createElement("p");
    var delButton = document.createElement("button");

    divToDo.setAttribute("class", "toDo");
    delButton.setAttribute("id", "delToDo");

    delButton.textContent = "Delete";
    p.textContent = textToDo;


    divToDo.appendChild(p)
    divToDo.appendChild(delButton);

    list.appendChild(divToDo);
}

function delTask(event) {
    const target = event.target;
    
    if (target.nodeName === 'BUTTON') {
        target.parentNode.remove();
    }
}

<div class="form">
    <input type="text" id="toDo" placeholder="To do...">
    <button id="addToDo">Add</button>
</div>

<div class="list">
    <div class="toDo">
        <p>Do homework</p>
        <button id="delToDo">Delete</button>
    </div>
    <div class="toDo">
        <p>Do smth</p>
        <button id="delToDo">Delete</button>
    </div>
</div>

Some observations, because you are adding new nodes to the DOM, you need to make use of the event delegation strategy in order to make the new elements accessible through events. You can read in this article about the topic http://javascript.info/event-delegation if you prefer videos, the course https://javascript30.com/ on the 15th with the title LocalStorage and Event Delegation explains the subject in a very clear way

How to delete div in to do list?

5 Answers5