无法动态移除段落：点击删除按钮无响应求助

问题原因 #

你的删除逻辑中使用document.querySelector("p")会选中页面内第一个<p>元素，但存在两个问题：

1. 若还未点击生成按钮就点击删除按钮，会因找不到元素返回null，调用remove()时触发报错，导致删除操作失败
2. 多次点击生成按钮后，只能删除第一个生成的段落，无法精准操作目标元素

解决方法 #

给动态生成的<p>添加专属类名，实现精准定位；同时在删除前判断元素是否存在，避免空值报错。

修改后的代码 #

<html>
<body>
  <div id="div1">
    <button id="btn1">click me to show line </button>
    <button id="btn2">click me to hide line </button>
  </div>
  <script>
    var lines = ["line1", "line2", "line3"];
    var button1 = document.getElementById("btn1");
    button1.addEventListener("click", myfunction1);
    
    function myfunction1 () {
      var show = document.getElementById("div1");
      var crt = document.createElement("p");
      // 给生成的段落添加专属类名
      crt.classList.add("dynamic-line");
      crt.innerText = lines[0];
      show.appendChild(crt);
    }
    
    var button2 = document.getElementById("btn2");
    button2.addEventListener("click", myfunction2);
    
    function myfunction2 () {
      // 精准选中我们生成的段落元素
      var targetLine = document.querySelector(".dynamic-line");
      // 确认元素存在后再执行删除
      if (targetLine) {
        targetLine.remove();
      }
    }
  </script>
</body>
</html>

如果需要一次性删除所有生成的段落，可将删除函数修改为：

function myfunction2 () {
  // 选中所有动态生成的段落
  var allLines = document.querySelectorAll(".dynamic-line");
  allLines.forEach(line => line.remove());
}

内容的提问来源于stack exchange，提问作者Aristidis Tsirimiangos