JS案例-动态删除

实现点击一个删除按钮,该项内容就会被删除的效果。使用了创建元素节点的createElement()、在元素节点的末尾追加节点的appendChild()、获取元素内部HTML的innerHTML、获取某一个节点的父节点的parentNode
具体步骤见注释。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>

  <body>
    <ul id="list">ul>
    <script>
      //点击一个删除按钮,该项内容就会被删除
      var arr = ["111", "222", "333"];
      for (var i = 0; i < arr.length; i++) {
        var oli = document.createElement("li"); //创建li
        oli.innerHTML = arr[i]; //把arr内容放进li
        var obutton = document.createElement("button");
        obutton.innerHTML = "delete"; //创建删除按钮

        obutton.onclick = handler; //绑定事件
        oli.appendChild(obutton);
        list.appendChild(oli);

        //删除该按钮的父节点内容,即li
        function handler() {
          this.parentNode.remove();
        }
      }
    script>
  body>
html>

运行结果:
JS案例-动态删除_第1张图片
点击第一个delete按钮,该行内容被全部删除。
JS案例-动态删除_第2张图片

你可能感兴趣的:(javascript,前端,开发语言)