It deletes when button is clicked but nothing happens when icon is
clicked.
That might happen when you attach event handler to icon and prevent further propagation.
Example snippet
const todoList = [{
id: 1,
title: 'Task 1'
},
{
id: 2,
title: 'Task 2'
},
{
id: 3,
title: 'Task 3'
}
]
const list = document.querySelector('#list');
const buttonClick = (event) => {
console.log('button click');
}
const iconClick = (event) => {
console.log('icon click');
event.stopPropagation();
}
for (let todoItem of todoList) {
const listItem = document.createElement('li');
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.addEventListener("click", buttonClick);
listItem.appendChild(document.createTextNode(todoItem.title));
listItem.appendChild(trashButton);
list.appendChild(listItem);
}
setTimeout(() => {
const icons = Array.from(list.querySelectorAll("svg"));
for (const icon of icons) {
icon.addEventListener("click", iconClick);
}
}, 1000);
ul {
list-style: none;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<ul id="list"></ul>
const todo = item.parentElement;
that’s the wrong code. Let me think about it. You created the button, then placed an icon in it. Then you added click event to this button. But the problem is that when you click on this button, the element that you want to delete is the parent element of this button. the parent element of the icon is already the button itself. Do you understand ?
Updated:
I’ve added comment lines to my changes and explained them. I hope that’s understandable. Good Luck!
//selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
//eventlistners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener('click', deleteCheck);
//functions
function addTodo(event) {
//prevent form submit
event.preventDefault();
//TODO DIV
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//create li
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);
//trash button
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash trash-btn"></i>'; // add trash-btn class here!
// trashButton.classList.add("trash-btn"); now instead of giving this class to the button itself, we can give directly to the icon.
todoDiv.appendChild(trashButton);
//append to list
todoList.appendChild(todoDiv);
//clear
todoInput.value = "";
}
function deleteCheck(e) {
const item = e.target;
//DELETE TODO
if (item.classList[0] === 'trash-btn') {
const todo = item.parentElement.parentElement; // Add one more parent element!
console.log(todo) // Look this carefully
// animation
todo.classList.add("fall");
todo.addEventListener('transitionend', function() {
todo.remove();
});
}
}
body {
color: whitesmoke;
}
header,
form {
min-height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
form input,
form button {
padding: 0.5rem;
font-size: 2rem;
border: none;
background-color: whitesmoke;
}
form button {
color: black;
background: whitesmoke;
cursor: pointer;
transition: all 0.5s ease;
}
form button:hover {
background: black;
color: whitesmoke;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 30%;
list-style: none;
}
.todo {
background: whitesmoke;
color: black;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.5 ease;
}
.todo li {
flex: 1;
}
.trash-btn {
color: red;
border: none;
padding: .4rem;
cursor: pointer;
font-size: 2rem;
}
.fa-trash {
pointer-events: none;
}
.fall {
transform: translateY(8rem) rotateZ(20deg);
display: none;
/* if you use opacity here, the Delete button will not work after a while. it makes more sense for the item to disappear completely using display none */
}
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script>
<header>
<h1> To do List</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button" type="submit"><i class = "fas fa-plus-square"></i></button>
</form>
<div class="todo-container">
<ul class="todo-list">
</ul>
</div>
this is a todolist that should delete when the button is clicked. it has an icon within. It deletes when button is clicked but nothing happens when icon is clicked. i have tried adding (!important) to the pointer events but it wont let the icon take the functionality of the parent.
MORE DETAILS HAVE BEEN ADDED
<script>
//selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
//eventlistners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener('click', deleteCheck);
//functions
function addTodo(event){
//prevent form submit
event.preventDefault();
//TODO DIV
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//create li
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);
//trash button
const trashButton = document.createElement('button');
trashButton.innerHTML = '<i class="fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//append to list
todoList.appendChild(todoDiv);
//clear
todoInput.value = "";
}
function deleteCheck(e) {
console.log(e.target);
const item = e.target;
//DELETE TODO
if (item.classList[0] === 'trash-btn') {
const todo = item.parentElement;
//animation
todo.classList.add("fall");
todo.addEventListener('transitionend', function(){
todo.remove();
});
}
}
</script>
THIS IS CSSSSSSSSSSSSSSSSSSSSSSSSSSS
<style>
body{
color: whitesmoke;
}
header, form{
min-height:20vh;
display:flex;
justify-content: center;
align-items: center;
}
form input, form button{
padding: 0.5rem;
font-size: 2rem;
border:none;
background-color: whitesmoke;
}
form button{
color: black;
background: whitesmoke;
cursor: pointer;
transition: all 0.5s ease;
}
form button:hover{
background: black;
color: whitesmoke;
}
.todo-container{
display:flex;
justify-content: center;
align-items:center;
}
.todo-list{
min-width: 30%;
list-style: none;
}
.todo{
background :whitesmoke;
color:black;
font-size: 1.5rem;
display:flex;
justify-content: space-between;
align-items: center;
transition: all 0.5 ease;
}
.todo li{
flex: 1;
}
.trash-btn{
background: red;
color:whitesmoke;
border: none;
padding: 1rem;
cursor: pointer;
font-size: 1rem;
}
.fa-trash{
pointer-events: none ;
}
.fall{
transform: translateY(8rem) rotateZ(20deg);
opacity:0;
}
</style>
HTMLLLLLLLLLLLLLLLLLLLLLLLLLLLL HERE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>everyday</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script>
</head>
<body>
<header>
<h1> To do List</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button" type ="submit"><i class = "fas fa-plus-square"></i></button>
</form>
<div class="todo-container">
<ul class="todo-list">
</ul>
</div>
</body>
You dont need to do anything special to make an icon within a button clickable. I think you aren’t showing us everything.
I have edited the question. Please help me look at it now
@Ani I solve your problem and add updated answer. You can check.
Oh I understand you and the goal is to remove the parentElement of the button which is a todolist item. This actually happens when the button is clicked but when the icon within the button is clicked, nothing happens. Please what can i do to correct that?
Sure. can you upload their code as js fiddle or code snippet so there’s no error ?(including html)
