时间戳

首页 > 解决方案 > 删除每个列表项

javascript - 删除每个列表项

问题描述

我已经学习 JavaScript 几个月了，目前正在做一个购物清单项目。

我希望能够在单击列表项时对其进行删除。但是，经过一段时间的研究，它不允许我这样做。我的尝试可以在下面的函数removeNeedItem中看到。有人可以看看我的代码并提供任何建议吗？

先感谢您。

<body>
    <div class="container">
      <h1><em>Shopping List</em></h1>
      <!-- Textbox -->
      <div class="form-wrap">
        <label><strong>Add Item: </strong></label>
        <input type="text" name="item-name" id="textbox" />
        <div class="buttons">
          <button class="input-btn" id="need-btn">Need</button>
          <button class="input-btn" id="own-btn">Have</button>
        </div>
      </div>
      <!-- Lists -->
      <h2 class="lists">Need to Buy</h2>
      <ul id="need-list"></ul>
      <h2 class="lists">Already Own</h2>
      <ul id="own-list"></ul>
    </div>
  </body>

var grocNeedList = [{ item: "Salmon", Required: true }];

function displayNeedList() {
  var needListUl = document.getElementById("need-list");
  needListUl.innerHTML = "";

  for (var i = 0; i < grocNeedList.length; i++) {
    grocNeedList[i].item;
    var listItem = document.createElement("li");
    listItem.innerText = grocNeedList[i].item;
    needListUl.appendChild(listItem);

    listItem.id = i;
    listItem.setAttribute("onclick", "removeNeedItem(event)");
  }
}

function removeNeedItem(event) {
  var position = event.currentTarget.id;
  position.style.textDecoration = "line-through";
  displayGroc();
}

var addInput = document.getElementById("textbox");
needButton.addEventListener("click", addNeedItem);

标签： javascripthtmlfunctiondom

解决方案

推荐阅读