JavaScript删除某些标记之间的所有内容

时间:2011-10-07 12:00:02

标签: javascript

我想仅使用JavaScript删除两个标签之间的所有内容(没有jQuery或类似的东西)。我也无法修改我想要删除的内容。

例如,对于以下代码:

<body>
<p>Remove me</p>
<a href="#">Me too</p>
<img src="But don't me!"/>
(...)

我想删除<body><img/>之间的所有内容。

3 个答案:

答案 0 :(得分:2)

您可以使用以下内容:

var children = document.body.childNodes;

for(var i = 0; i < children.length; i++)
{
    if(children[i].tagName == 'IMG')
        break;

    document.body.removeChild(children[i]);
}

尝试它,它应该工作,但这是一个严格的例子,与示例代码中的结构完全相同。通常,您获取要删除的内容的父元素。然后逐个删除标签,直到找到您不想删除的标签。这可能有用,但我不推荐它 - 将内容包装在div或类似的东西中,只删除这一个标签。使您和其他可能需要查看代码的人更加简单。

答案 1 :(得分:1)

由于您无法修改HTML或使用库,您可以尝试使用getElementsByTagName来检索节点

  • getElementsByTagName(“p”)[0]
  • getElementsByTagName(“a”)[0]

然后,这取决于你是否希望它们仍然存在,但没有内容,或者你想要删除标签。如果您希望删除内容但由于某种原因保留空节点,请尝试设置

  • var aNode = document.getElementsByTagName('a')[0];
  • aNode.innerHtml = “”;

如果要删除整个节点,请按照前面的说明进行操作:

  • var pNode = document.getElementsByTagName('p')[0];
  • pNode.parentNode.removeChild(pNode);

当然,您必须密切关注未来不会发生变化的DOM,因为这可能会破坏解决方案。

答案 2 :(得分:0)

基于前提:

  

我想仅使用JavaScript删除两个标签之间的所有内容(没有jQuery或类似的东西)。

以及上面的评论:

  

另外,我要说我无法修改内容

如果你不能将id添加到元素中或将它们包装在某个容器中,我可以看到两个解决方案。

  • 使用getElementByTagName()找到img-tag,然后删除之前的所有子节点。
  • 使用document.removeChild()并使用固定的子节点索引(如果项目的索引是固定的)

两种解决方案都严重依赖于未来不会发生变化的DOM。我强烈建议使用jQuery或其他一些框架来简化(和跨浏览器兼容)。