如何删除单击Java脚本中<i>元素的<li>元素?

时间:2018-09-07 06:02:39

标签: javascript jquery html html5 css3

我仍在学习JS,并且在单击Java脚本中的元素时删除

  • 元素存在一些小问题。也许有人可以提供帮助或提供建议?

    这是我的代码:

    var add = document.getElementById("add-button");
    add.addEventListener("click", function() {
      var ul = document.getElementById("tasks");
      var input = document.getElementById("new-task").value;
    
      var li = document.createElement("li");
      ul.appendChild(li);
      li.innerText = input;
    
      var i = document.createElement("i");
      i.classList.add('fas', 'fa-times');
      //                i.className = 'fas fa-times';
      li.appendChild(i);
    
      input.value = "";
    });
    
    
    var remove = document.querySelectorAll(".fas");
    remove.addEventListener("click", function() {
    
      for (var i = 0; i < remove.length; i++) {
        remove[i].classList.remove('remove-list');
      }
    });
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    </head>
    
    <body>
      <div class="wrapper">
        <div class="to-do-container">
          <div class="input-data">
            <input id="new-task" type="text">
            <button id="add-button" type="button">Add</button>
          </div>
          <ul id="tasks">
            <li class="remove-list">Zadzwonić do...<i id="fas" class="fas fa-times"></i></li>
            <li class="remove-list">Odebrać dzieci z...<i class="fas fa-times"></i></li>
            <li class="remove-list">Kupić na obiad...<i class="fas fa-times"></i></li>
            <li class="remove-list">Umówić się na...<i class="fas fa-times"></i></li>        
          </ul>
        </div>
      </div>
    </body>
    
    </html>

    我使用循环是因为当我使用querySelectorAll时,有必要进行循环。预先感谢您的帮助。

  • 1 个答案:

    答案 0 :(得分:1)

    您可以编写一个函数来删除父li,并在addEventLister内调用此函数,在创建i时需要附加此函数

    var add = document.getElementById("add-button");
    add.addEventListener("click", function() {
      var ul = document.getElementById("tasks");
      var input = document.getElementById("new-task").value;
    
      var li = document.createElement("li");
      ul.appendChild(li);
      li.innerText = input;
    
      var i = document.createElement("i");
      i.classList.add('fas', 'fa-times');
      i.addEventListener("click", removeLi);
      //                i.className = 'fas fa-times';
      li.appendChild(i);
    
      input.value = "";
    });
    
       var remove = document.getElementsByClassName("fas fa-times");
    for (var i = 0; i < remove.length; i++) {
     remove[i].addEventListener('click',removeLi);
    }
    
    function removeLi() {
      this.parentElement.remove();
    }
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    </head>
    
    <body>
      <div class="wrapper">
        <div class="to-do-container">
          <div class="input-data">
            <input id="new-task" type="text">
            <button id="add-button" type="button">Add</button>
          </div>
          <ul id="tasks">
            <li class="remove-list">Zadzwonić do...<i id="fas" class="fas fa-times"></i></li>
            <li class="remove-list">Odebrać dzieci z...<i class="fas fa-times"></i></li>
            <li class="remove-list">Kupić na obiad...<i class="fas fa-times"></i></li>
            <li class="remove-list">Umówić się na...<i class="fas fa-times"></i></li>        
          </ul>
        </div>
      </div>
    </body>
    
    </html>