Question

我有一个看起来像这样的div结构......

<div class="gallery_lightview">
    <div id="lg_image">
        <a href="http://www.website.com/?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" class="lightview_main" title="TITLE HERE">
            <img class="alignnone" src="HEADER.jpg" alt="" />
        </a>
    </div>
</div>

我想要做的是删除仅在div类“gallery_lightview”之间显示的标记并保留标记。所以一旦它全部剥离它看起来就像......

<div class="gallery_lightview">
    <div id="lg_image">
        <img class="alignnone" src="HEADER.jpg" alt="" />
    </div>
</div>

基本上将其设为不可点击的图像。这可能吗？它在移动网站上运行，我不希望它在标题中。真的希望它是一个自包含的Javascript，位于"the_content" Wordpress调用之上（这是"gallery_lightview" div代码的位置。

我选择不使用jQuery，因为它的移动设备会增加负载。从字面上看，图书馆唯一要做的就是删除<a>标签。

有什么想法吗？

Answer 1

你可以做一些事情，比如采用内部元素的innerHTML，并使其成为祖父母的innerHTML。所以：

var div = document.getElementById('lg_image');
var img = div.childNodes[0].childNodes[0];
div.innerHTML = img.innerHTML;

这不是很漂亮，但它很轻巧且有效。更优雅的选择可能是削减jQuery或找到类似的，更轻量级的库。

Answer 2

纯JS解决方案 - 我已将目标<a>的ID设为"target"。您可以随意抓取对象：

HTML：

<div class="gallery_lightview">
    <div id="lg_image">
        <a href="foo" rel="bar" class="baz" title="TITLE HERE" id='target'>
          <img class="alignnone" src="HEADER.jpg" alt="" />
        </a>
    </div>
</div>

使用Javascript：

// Grab anchor object
var target = document.getElementById('target');
// Grab img object, using tagName to avoid possible text nodes
var img = target.getElementsByTagName("IMG");

// Append the image object as a direct child of the parent
target.parentNode.appendChild(img[0]);
// Remove the anchor (empty except for text nodes)
target.parentNode.removeChild(target);

如果您希望对许多节点执行此操作，可以使用getElementsByTagName()获取所有<a>，然后循环使用此过程。

编辑

appendChild行缺少数组索引[0]，现已添加。

<强>更新

http://www.jsfiddle.net/steve/yTcxn/是一个简化版本，经过充分评论，并在FF，IE和Chrome上进行了测试。它应该通过一点个性化来完成你想要的。

Javascript解决方案删除特定标记，但将其余部分保留在特定的DIV中

2 个答案: