how to make icon within button work like the button ( pointer events: none; doesn't work)

Question

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. — Deadron, May 25 '20 at 15:17
Hi Ani, can you include the `onClick` event handler code here? The piece of code that triggers when the button is clicked, I imagine it's the code that defines `item`. It looks as though you're targetting the wrong element to delete sometimes. — Brett East, May 25 '20 at 15:28
@Ani I solve your problem and add updated answer. You can check. — CanUver, May 25 '20 at 22:58

CanUver · Answer 1 · 2020-05-25T22:58:23.203

 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>

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? — Ani, May 25 '20 at 16:25
Sure. can you upload their code as js fiddle or code snippet so there's no error ?(including html) — CanUver, May 25 '20 at 16:34

score 0 · Answer 2 · answered May 25 '20 at 15:58

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>

how to make icon within button work like the button ( pointer events: none; doesn't work)

2 Answers2