如何使用JavaScript实现点击删除form表单内的p标签元素

实现方案 #

你之前使用的appendChild是新增子元素的API，不符合删除节点的需求，可参考以下实现逻辑：

1. 获取id为form的目标表单元素
2. 选中该表单内部的所有p标签
3. 遍历所有p标签执行删除操作

完整代码示例 #

HTML部分（新增点击触发按钮）

<button onclick="removeFormParagraphs()">删除表单内所有p元素</button>
<div id="content">
  <form id="form">
    <p>Hola</p>
    <p>que</p>
    <p>tal</p>     
  </form>
</div>

JavaScript部分

function removeFormParagraphs() {
  const targetForm = document.getElementById('form')
  // querySelectorAll返回静态NodeList，可直接遍历删除
  targetForm.querySelectorAll('p').forEach(p => p.remove())
}

如果需要兼容不支持remove()方法的旧版浏览器，可以替换为removeChild写法：

function removeFormParagraphs() {
  const targetForm = document.getElementById('form')
  const pList = targetForm.getElementsByTagName('p')
  // getElementsByTagName返回动态集合，倒序遍历避免索引错乱
  for(let i = pList.length - 1; i >= 0; i--) {
    pList[i].parentNode.removeChild(pList[i])
  }
}

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