CODEWITHSUNDEEP
javascripthtml
Ruel
Ruel

Reputation: 15780

Removing a div with no id or class with Javascript

My wordpress blog is having issues with syntax highlighter evolved plugin, and there's this weird div element popping out:

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

This causes my page to extend, creating a big space at the end of the page. This also is found on every wordpress blog. Funny thing is, only chrome sees that (using Inspect Element). I've already tried in IE9 developer tools and FF firebug, the div is not there and my page is fine.

NOTE: I've already posted a separate question here. And my question here is different from that.

I want to fix this little problem so bad, and it just came to my mind to use JavaScript for this. What I want to do is: Remove the div with javascript.

It's easy removing a div with an ID or class, but this one doesn't have any. I also do not want to affect all the other divs. How can I accomplish this?

P.S. It has no parent IDs or class. It's right after the container class div. It's parent is <body>.

EDIT: Here's the html: alt text

Upvotes: 3

Views: 5982

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1074505

Update: Based on the fact that you can't rely on the div used below.

If the div really is the always the last div in the document, this is actually easier:

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 will remove the last div in the document. If you needed to skip a lightbox div or something, adjust to use - 2 or - 3, etc.

Old Answer using the earlier information:

Given that structure, something along these lines:

// 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);
    }
}

Upvotes: 1

Nitin Kumar
Nitin Kumar

Reputation: 109

If you are using jQuery, You can reference the div using a parent or sibling div that might have an ID or class defined.

For examample :

<div id="parentDIVID">

  <div>your problem div</div>

</div>


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

If you can provide more html code surrounding your problem div, we can construct a jQuery selector that will work in your case.

Update : Based on the markup provided

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]);
    }


}

Upvotes: 1

Fred
Fred

Reputation: 4221

If it's always last or close to last you can use jQuery or normal CSS3 selectors

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

OR

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

More on CSS3 Selectors and .remove()

OR you could use CSS i.e.

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

Upvotes: 3

Mathew
Mathew

Reputation: 144

You could do something like this:

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]);
  }
}

Upvotes: 1

Related Questions