I cannot remove the new item created in my Whole List - Using Vanilla

Asked

Viewed 54 times

2

The 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 to create the same class for my SPAN before adding it to my li, but it still hasn’t worked.

//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 managed to do my Todo List with Jquery, I can’t repeat the logic with Vanilla. Someone could help me with this?

Thank you.

javascript

1 answer

2


This is because the elements created dynamically 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);
    });
};

for:

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 required:

//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.

Behold:

//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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.