如何删除指定的children？

Question

<body>
  <p>dfg</p>
  <h1>yoyo</h1>
  <h1>yoyo2</h1>
  <ul>
    <li>somo</li>
   </ul>
 </body>

例如，我只想从正文中删除 h1。另一个children应该留下

Answer 1

您可以使用 CSS 选择器。

您可以使用 jQuery 或 VanillaJS 来完成。例如，这是我的 VanillaJS 代码。

var headers = document.querySelectorAll('h1');
headers.forEach(function(h) { h.remove(); });

这将有效地从 DOM 中删除 headers。

Answer 2

您可以使用 getElementsByTagName 获取 h1 标签的 HTMLCollection（不是数组），即 live。

删除元素时，元素会相应地更新它们的索引，这意味着您必须从最后一个位置到第一个位置删除每个元素。

Javascript 解决方案：

var h1Elems = document.getElementsByTagName('h1');

for(var i = h1Elems.length - 1;  i >= 0;  i--){
  h1Elems[i].parentElement.removeChild(h1Elems[i]);
}

See this code working in this jsfiddle

Answer 3

为了可用性，我们可以创建自己的 fn 以通过标记删除节点。请评论这个：

function rem(tag) {
  var h = document.querySelectorAll(tag); //return NodeList not array    
  [].forEach.call(h,function(elm) {            
      elm.parentNode.removeChild(elm);
  });
}

//passing tag to remove
rem('p');

<body>
  <p>dfg</p>
  <h1>yoyo</h1>
  <h1>yoyo2</h1>
  <ul>
    <li>somo</li>
  </ul>
</body>

如何删除指定的children？

How to delete specified children?

javascript

html

removechild