Question

我在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>

Answer 1

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

希望这有帮助。

段

＆＃13;

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();
}

＆＃13;

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

＆＃13;

Answer 2

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

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

和这个脚本：

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

Answer 3

走了之后，它会根据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>

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

3 个答案:

段