Click the Span (Trash icon) to trigger in my li events fadeOut and then remove

Question

Click the Span (Trash icon) to trigger in my li events fadeOut and then remove

Navigation

#1 by (2 votes)

2

I'm creating an Todo List with vanilla js and I ran into a problem. When I click on the bin icon (within my span) I can not delete my li.

Could I point the way so that I can do javascript with the effect of fadeOut and then remove it from my Todo list ??

var itens = document.getElementsByClassName("item")

for(var i = 0; i < itens.length; i++){
    itens[i].addEventListener("click", function(){
       console.log("Me deleta")
    });
};

body{
    font-family: 'Roboto', sans-serif;
    background: #50C9C3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #96DEDA, #50C9C3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #96DEDA, #50C9C3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1{
    background: #2980b9;
    color: white;
    margin: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: normal;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

li{
    height: 40px;
    line-height: 40px;
    color: #666;
}

li:nth-child(2n+1){
    background: #fff;
}

input{
    font-size: 18px;
    color: #2980b9;
    width: 100%;
    border: 3px solid rgba(0,0,0,0);
    padding: 13px 13px 13px 20px;
    box-sizing: border-box;
}

input:focus{
    background: white;
    border: 3px solid #2980b9;
    outline:none;
}

span{
    background-color: #e74c3c;
    height: 40px;
    margin-right: 20px;
    text-align: center;
    color: white;
    width: 0;
    display: inline-block;
    transition: 0.2s linear;
    opacity: 0;
}

li:hover span{
    width: 40px;
    opacity: 1.0;
}

.container{
    margin: 100px auto;
    width: 360px;
    box-shadow: 0 0 3px rbga(0,0,0,0.1);
    background: #f7f7f7;
}

.selecao{
    color: gray;
    text-decoration: line-through;
}

.fa-plus{
    float: right;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Todo List</title>
        
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
        <link rel="stylesheet" href="assets/css/style.css">

    </head>
    <body>
        <div class="container">
            <h1>To-do List <i class="fas fa-plus"></i></h1>
            <input type="text" placeholder="Add New Todo">
            <ul>  
                <li><span class="item"><i class="fa fa-trash"></i></span> Estudar programação part I</li>
                <li><span class="item"><i class="fa fa-trash"></i></span> Cuidar do Artur</li>
                <li><span class="item"><i class="fa fa-trash"></i></span> Preparar almoço</li>
                <li><span class="item"><i class="fa fa-trash"></i></span> Fazer exercícios de Sérvio</li>
                <li><span class="item"><i class="fa fa-trash"></i></span> Estudar programação part II</li>
                <li><span class="item"><i class="fa fa-trash"></i></span> Comer um chocolate</li>
                <li><span class="item"><i class="fa fa-trash"></i></span> Lavar a louça</li>
            </ul>
        </div>

        <script type="text/javascript" src="assets/js/Todo2.js"></script>
    </body>
</html>

Thank you in advance!

javascript opacity span removechild

asked by anonymous 14.12.2018 / 13:56

1 answer

How to auto-execute a script during Linux startup? Get Gaps in a SQL Sequence

score 2 · Accepted Answer

You can use const li = this.closest('li'); to know the <li> you want to remove and then li.parentElement.removeChild(li); to remove. This will change the DOM, if you have information about what is shown in an array for example you should change there too ...

To fadeout together a suggestion with an animation, you can create other

var itens = document.getElementsByClassName("item")

for (var i = 0; i < itens.length; i++) {
  itens[i].addEventListener("click", function() {
    const li = this.closest('li');
    li.classList.add('deletar');
    setTimeout(() => li.parentElement.removeChild(li), 800);
  });
};

body {
  font-family: 'Roboto', sans-serif;
  background: #50C9C3;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #96DEDA, #50C9C3);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #96DEDA, #50C9C3);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
  background: #2980b9;
  color: white;
  margin: 0;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: normal;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  height: 40px;
  line-height: 40px;
  color: #666;
}

li:nth-child(2n+1) {
  background: #fff;
}

input {
  font-size: 18px;
  color: #2980b9;
  width: 100%;
  border: 3px solid rgba(0, 0, 0, 0);
  padding: 13px 13px 13px 20px;
  box-sizing: border-box;
}

input:focus {
  background: white;
  border: 3px solid #2980b9;
  outline: none;
}

span {
  background-color: #e74c3c;
  height: 40px;
  margin-right: 20px;
  text-align: center;
  color: white;
  width: 0;
  display: inline-block;
  transition: 0.2s linear;
  opacity: 0;
}

li:hover span {
  width: 40px;
  opacity: 1.0;
}

.container {
  margin: 100px auto;
  width: 360px;
  box-shadow: 0 0 3px rbga(0, 0, 0, 0.1);
  background: #f7f7f7;
}

.selecao {
  color: gray;
  text-decoration: line-through;
}

.fa-plus {
  float: right;
}

li {
  opacity: 1;
  transition: opacity .8s;
}

li.deletar {
  opacity: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Todo List</title>

  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/css/style.css">

</head>

<body>
  <div class="container">
    <h1>To-do List <i class="fas fa-plus"></i></h1>
    <input type="text" placeholder="Add New Todo">
    <ul>
      <li><span class="item"><i class="fa fa-trash"></i></span> Estudar programação part I</li>
      <li><span class="item"><i class="fa fa-trash"></i></span> Cuidar do Artur</li>
      <li><span class="item"><i class="fa fa-trash"></i></span> Preparar almoço</li>
      <li><span class="item"><i class="fa fa-trash"></i></span> Fazer exercícios de Sérvio</li>
      <li><span class="item"><i class="fa fa-trash"></i></span> Estudar programação part II</li>
      <li><span class="item"><i class="fa fa-trash"></i></span> Comer um chocolate</li>
      <li><span class="item"><i class="fa fa-trash"></i></span> Lavar a louça</li>
    </ul>
  </div>

  <script type="text/javascript" src="assets/js/Todo2.js"></script>
</body>

</html>