如何在javascript中添加和删除对象

How to add and delete object in javascript?

本文关键字：删除 对象 添加 javascript      更新时间：2023-09-26

我在HTML中有订单列表：

<ol id="myList">
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ol>
<button onclick="myFunction()">Try it</button>

我用Javascript编写代码，现在我可以在此列表中添加一个项目。我还设置了添加项目的限制。当我添加一个项目时，我该如何删除它？

<script>
    var limit = 1
    var currentAmount = 0;
    function myFunction() {
        //Check we haven't reached our limit.
        if(currentAmount < limit){
            var x = document.createElement("li");
            var t = document.createTextNode("Coffee");
            x.appendChild(t);
            document.getElementById("myList").appendChild(x);
            currentAmount++; //Increment our count
        }
    }
</script>

您可以将删除按钮添加到列表中的每个项目，并将 onclick 事件附加到它将调用removeItem()函数，请查看下面的示例。

希望这有帮助。

片段

var limit = 1
var currentAmount = 0;
function myFunction() {
  //Check we haven't reached our limit.
  if(currentAmount < limit){
    var x = document.createElement("li");
    var remove_btn = document.createElement("input");
    remove_btn.setAttribute("type", "button");
    remove_btn.setAttribute("value", "X");
    remove_btn.setAttribute("onclick", "removeItem(this)");
    x.appendChild(remove_btn);
    var t = document.createTextNode("Coffee");
    x.appendChild(t);
    document.getElementById("myList").appendChild(x);
    currentAmount++; //Increment our count
  }
}
function removeItem() {
     event.target.parentNode.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="myList">
  <li><button onclick="removeItem(this)">X</button> Tea</li>
  <li><button onclick="removeItem(this)">X</button> Milk</li>
  <li><button onclick="removeItem(this)">X</button> Water</li>
</ol>
<button onclick="myFunction()">Try it</button>

好吧，这取决于您要删除哪个元素，但例如，要删除最后一个元素，请添加此按钮：

<button onClick="removeItem();">Now try this</button>

和这个脚本：

function removeItem() {
    document.getElementById("myList").lastChild.remove();
}

得意忘形，它按照 OP 的要求删除项目，并且：

  • 为每个列表项生成删除按钮。
  • 为旧列表项添加了删除按钮。
  • 添加了文本输入，以便用户可以输入列表项。
  • 向列表中添加了eventListener，以便处理单击的按钮并节省内存，eventListener而不是每个按钮一个。

片段 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Shopping List</title>
  <style>
    #inp1 {
      margin: 10px 15px;
      width: 25ex;
    }
    .item {
      max-width: 30ex;
      position: relative;
    }
    .del {
      line-height: 1;
      width: 7ex;
      margin: 0 20px;
      padding: 0 3px;
      position: absolute;
      right: -10px;
    }
    .del:before {
      content: 'Delete';
      font: inherit;
    }
  </style>
</head>
<body>
  <h2>Shopping List</h2>
  <ol id="list">
    <li class="item">Tea
      <button class="del"></button>
    </li>
    <li class="item">Milk
      <button class="del"></button>
    </li>
    <li class="item">Water
      <button class="del"></button>
    </li>
  </ol>
  <input id="inp1" name="inp1" placeholder="Grocery Item" />
  <button onclick="list(inp1.value)">Add</button>
  <script>
    var limit = 6
    var currentAmount = 3;
    var ol = document.getElementById("list");
    function list(item) {
      //Check we haven't reached our limit.
      if (currentAmount < limit) {
        var li = document.createElement("li");
        var str = document.createTextNode(item);
        var btn = document.createElement('button');
        li.appendChild(str);
        li.appendChild(btn);
        li.classList.add('item');
        btn.classList.add('del');
        ol.appendChild(li);
        currentAmount++; //Increment our count
      }
      return false;
    }
    ol.addEventListener('click', function(event) {
      if (event.target != event.curentTarget) {
        var tgt = event.target;
        var li = tgt.parentElement;
        ol.removeChild(li);
        currentAmount--;
      }
      event.stopPropagation();
    }, false);
  </script>
</body>
</html>

相关文章：