代码之家  ›  专栏  ›  技术社区  ›  Frozendawn

我无法使按钮向新创建的<li>元素添加类

  •  2
  • Frozendawn  · 技术社区  · 6 年前

    我想列一个简单的待办事项清单。我已经成功地创建了按钮,但是,我不能让它在单击时删除项目。控制台上写着:

    let getText = document.querySelector(".text");
    let getUl = document.querySelector(".list");
    let dBtn = document.createElement("button");
    
    function addItem() {
      let newLi = document.createElement("li");
      newLi.innerHTML = getText.value;
      newLi.appendChild(dBtn);
      getUl.appendChild(newLi);
      getText.value = "";
    }
    
    dBtn.appendChild(document.createTextNode("X"));
    
    dBtn.addEventListener("click", function() {
      li.classList.add("delete");
    })
    * {
      padding: 0;
      margin: 0;
      text-align: center;
    }
    
    .button-add {
      height: 19px;
      width: 40px;
      border-radius: 5px;
    }
    
    .delete {
      display: none;
    }
    
    .text {
      border-radius: 5px;
    }
    <h1>to-do list</h1>
    <input type="text" class="text" placeholder="Item to add ...">
    <button type="button" class="button-add" onclick="addItem()">Add</button><br>
    <ul class="list">
    
    </ul>
    2 回复  |  直到 6 年前
        1
  •  1
  •   Mamun    6 年前

    delete li

    当前代码仅将按钮添加到第一个 . 如果是这样,则必须在创建 .

    this.parentNode.remove();
    

    这将消除电流

    let getText = document.querySelector(".text");
    let getUl = document.querySelector(".list");
    
    function addItem (){
      let newLi = document.createElement("li");
      let dBtn = document.createElement("button");
      dBtn.addEventListener("click", removeLi);
      newLi.innerHTML=getText.value;
      dBtn.appendChild(document.createTextNode("X"));
      newLi.appendChild(dBtn);
      getUl.appendChild(newLi);
      getText.value="";
    }
    
    function removeLi()  {
      this.parentNode.remove();
    }
    * {
      padding: 0;
      margin: 0;
      text-align: center;
    }
    
    .button-add {
      height: 19px;
      width: 40px;
      border-radius: 5px;
    }
    
    .delete{
      display: none;
    }
    
    .text {
      border-radius: 5px;
    }
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title></title>
      </head>
      <body>
        <h1>to-do list</h1>
        <input type="text" class="text" placeholder="Item to add ...">
        <button type="button" class="button-add" onclick="addItem()">Add</button><br>
        <ul class="list">
    
        </ul>
    
        <script src="main.js"></script>
      </body>
    </html>
        2
  •  0
  •   Gabbr Issimo    6 年前

    尝试从按钮e中删除onclick=“”并在js中给它onclick

    代替 function addItem(){ .. }

    document.getElementsByClassName('button-add')[0].onclick = function (){
      let newLi = document.createElement("li");
      newLi.innerHTML=getText.value;
      newLi.appendChild(dBtn);
      getUl.appendChild(newLi);
      getText.value="";
    }
    

    用于删除

    dBtn.addEventListener("click",function ()  {
      this.parentNode.classList.add("delete");
    })
    

    https://jsfiddle.net/dj1eya95/3/