I can not remove the new item created in my Todo List - Using Vanilla

Question

I can not remove the new item created in my Todo List - Using Vanilla

Navigation

#1 by (2 votes)

2

Items that are already in the list I can delete, but after I add a new item in the list, the remove no longer works. I took care of creating the same class for my SPAN before adding it to my li, but it still did not work.

//Seleciona Span 
var itens = document.getElementsByClassName("item")

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


//Seleciona Input
var input = document.querySelector("input");

//Adiciona novo item na lista
input.addEventListener("keydown", (event) => {
      if(event.which === 13){
        var minhaLi = document.createElement("li");
        var meuSpan = document.createElement("span");
        var meuIcone = document.createElement("i");
        
        var minhaUl = document.querySelector("ul");

        var novoTexto = input.value;
        //this.value = " ";

        meuIcone.classList.add('fa','fa-trash');
        meuSpan.classList.add("item");
        meuSpan.append(meuIcone);

        minhaUl.appendChild(minhaLi).append(meuSpan, novoTexto);
         
      };
});

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;
    opacity: 1;
    transition: opacity .8s;
}

li.deletar {
    opacity: 0;
  }


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 id="adicionaItem" 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>

Although I have managed to do my Todo List with Jquery, I can not repeat the logic with Vanilla. Could someone help me with this?

Thank you.

javascript

asked by anonymous 21.12.2018 / 18:17

1 answer

Reapping the HttpClient and life cycle of an ApiController Show a collapse and hide the other BOOTSTRAP 4

score 2 · Accepted Answer

This happens because dynamically created elements were not added to your for when the page was loaded.

For the click to be recognized for elements when the page was loaded and for elements added after, replace the code snippet below:

//Deleta Li
for(var i = 0; i < itens.length; i++){
    itens[i].addEventListener("click", function(){
       var li = this.closest("li");
       li.classList.add("deletar");

       setTimeout(() => li.parentElement.removeChild(li), 500);
    });
};

by:

document.addEventListener("click", function (e){
   if(~e.target.className.indexOf("item") || ~e.target.className.indexOf("trash")){

      var li = ~e.target.className.indexOf("item") ?
      e.target.parentNode :
      e.target.parentNode.parentNode;
      li.classList.add("deletar");
      setTimeout(() => li.parentElement.removeChild(li), 500);
   }

});

And delete the line below that is no longer needed:

//Seleciona Span 
var itens = document.getElementsByClassName("item");

The code will identify if what was clicked was the class .item or .trash and remove the corresponding line.

See:

//Deleta Li
document.addEventListener("click", function (e){
   if(~e.target.className.indexOf("item") || ~e.target.className.indexOf("trash")){
      
      var li = ~e.target.className.indexOf("item") ?
      e.target.parentNode :
      e.target.parentNode.parentNode;
      li.classList.add("deletar");
      setTimeout(() => li.parentElement.removeChild(li), 500);
   }
   
});

//Seleciona Input
var input = document.querySelector("input");

//Adiciona novo item na lista
input.addEventListener("keydown", (event) => {
      if(event.which === 13){
        var minhaLi = document.createElement("li");
        var meuSpan = document.createElement("span");
        var meuIcone = document.createElement("i");
        
        var minhaUl = document.querySelector("ul");

        var novoTexto = input.value;
        //this.value = " ";

        meuIcone.classList.add('fa','fa-trash');
        meuSpan.classList.add("item");
        meuSpan.append(meuIcone);

        minhaUl.appendChild(minhaLi).append(meuSpan, novoTexto);
         
      };
});

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;
    opacity: 1;
    transition: opacity .8s;
}

li.deletar {
    opacity: 0;
  }


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;
}

<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">
<div class="container">
   <h1>To-do List <i class="fas fa-plus"></i></h1>
   <input id="adicionaItem" 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>