代码之家 › 专栏 › 技术社区 › Ruel

删除没有id的div或使用Javascript的类

html javascript

Ruel · 技术社区 · 14 年前

我的wordpress博客有问题 语法高亮进化 插件,然后出现了一个奇怪的div元素:

<div style="z-index: -1; position:absolute; top:0px; left: 0px; width: 100%; height: 4031px;"></div>

这会导致我的页面扩展,在页面末尾创建一个很大的空间。这也可以在每个wordpress博客上找到。有趣的是,只有chrome能看到(使用Inspect元素)。我已经在IE9开发工具和FF firebug中试过了,div不在那里,我的页面很好。

注意 :我已经发布了一个单独的问题 here . 我这里的问题和那个不一样。

我非常想解决这个小问题,所以我就想到了使用JavaScript来解决这个问题。我想做的是: 用javascript删除div .

删除带有ID或类的div很容易,但这个没有。我也不想影响其他所有的div。我怎样才能做到这一点?

附笔。 它没有父ID或类。就在容器类div后面,它的父级是 <body> .

编辑 :这是html: alt text

4 回复 | 直到 8 年前

Fred 14 年前

如果总是最后一个或接近最后一个,可以使用jQuery或普通CSS3选择器

$('body > div:last-child').remove();

或者

$('body > div:nth-last-child(n)').remove();

更多关于 CSS3 Selectors 和 .remove()

或者你可以使用CSS。

body > div:last-child (or div:nth-last-child(n)) {
  display: none;
}

Mathew 14 年前

你可以这样做:

var els = document.getElementsByTagName('div');
for (var i = 0; l = els.length; i < l; i++) {
  if (els[i].innerHTML == 'style....') {
    els[i].parentNode.removeChild(els[i]);
  }
}

Nitin Kumar 14 年前

如果您使用的是jQuery,那么可以使用可能定义了ID或类的父div或兄弟div来引用div。

例如:

<div id="parentDIVID">

  <div>your problem div</div>

</div>


Then you can use jQuery to reference your problem div like this : $("#parentDIVID > div")

如果您可以围绕problem div提供更多的html代码,那么我们可以构造一个jQuery选择器,它将在您的情况下工作。

更新:基于提供的标记

function removeDiv() {

    var parent = document.getElementById("stimuli_overlay").parentNode;

    var children = document.getElementById("stimuli_overlay").parentNode.childNodes;

    for (var i = 0; i < children.length; i++) {

        if (children[i].style.zIndex == -1)
            parent.removeChild(children[i]);
    }


}

T.J. Crowder 14 年前

更新 :基于您不能依赖下面使用的div这一事实。

如果div真的是 总是最后一个div 在文档中,这实际上更容易:

var divs, div;
divs = document.getElementsByTagName("div");
if (divs.length > 0) {
    div = divs.item(divs.length - 1);
    div.parentNode.removeChild(div);
}

Live example

length - 1 将删除文档中的最后一个div。如果需要跳过lightbox div或其他内容,请调整为使用 - 2 或 - 3 等等。

旧答案 使用前面的信息:

~~考虑到这种结构,大致如下:~~

// Get the div that follows it, which conveniently has an ID
var div = document.getElementById('stimuli_overlay');

// If that worked...
if (div) {
    // ...move to the previous div, with a bit of paranoia about blank non-element
    // nodes in-between
    div = div.previousSibling;
    while (div && (div.nodeType !== 1 || div.tagName !== "DIV")) {
        div = div.previousSibling;
    }

    // Check that this really is the right div
    if (div && div.tagName === "DIV"
        // The following checks look for some of the style properties that your
        // screenshot shows are set on the div
        && div.style.position == "absolute"
        && div.style.zIndex == "-1"
        && div.style.top == "0px"
        && div.style.left == "0px"
        && div.style.width == "100%"
        && /* ...possibly more checks here... */) {
        // Remove it
        div.parentNode.removeChild(div);
    }
}