Delete unclosed tag elements via jQuery

Say I have element sequence like below :

<div style="margin-bottom:9px;line-height:normal;margin-top:4px"></div>
<div style="margin-bottom:9px;line-height:normal;margin-top:4px">Something Here</div>
<div style="margin-bottom:9px;line-height:normal;margin-top:4px">

There are unclosed elements below and I want to delete them because they ruin the design layout. So could please tell me how to find and delete the unclosed and empty elements like above :

<div style="margin-bottom:9px;line-height:normal;margin-top:4px"></div>
<div style="margin-bottom:9px;line-height:normal;margin-top:4px">

Your help is much appreciated.

Edit for Recommendations : First of all, editing source code is something really impossible. Because they are hundred of pages like this one and I need a quick solution :( I didn't write those codes but I have to maintain right now and I need temporary but working solutions.They are static so I can't use server side code at this point because they are all html files.

Edit For Recommendation 2 : The structure actually is same.

Corrupted HTML :

<div style="margin-bottom:9px;line-height:normal;margin-top:4px"></div>
<div style="margin-bottom:9px;line-height:normal;margin-top:4px">Something Here</div>
<div style="margin-bottom:9px;line-height:normal;margin-top:4px">
<div style="margin-bottom:9px;line-height:normal;margin-top:4px"></div>
<div style="margin-bottom:9px;line-height:normal;margin-top:4px">Something Here</div>
<div style="margin-bottom:9px;line-height:normal;margin-top:4px">

How it is supposed to be :

<div style="margin-bottom:9px;line-height:normal;margin-top:4px">Something Here</div>
<div开发者_高级运维 style="margin-bottom:9px;line-height:normal;margin-top:4px">Something Here</div>

There is no inner divs or anything else, it is pretty straightforward.

JQuery does not manipulate XML/HTML structure, only the DOM and the DOM representation of that. I believe it is not possible that JQuery can do something like that.

The best thing to do is run your page through the W3C validator.

Be careful when doing such manipulations as it might be quite difficult to determine which tag is the one that is not closed..

for instance

<div> some text <div> more text</div>

which is the unclosed div. the first or the second ?

I don't think deleting unclosed elements can be done with javascript, because JS works on the DOM which is constructed by the browser.

Consider for example:

<div id="d1">
<div id="d2">
</div>

Which div is unclosed, 1 or 2? Browsers will likely consider the first to be closed and the second unclosed and construct the DOM accordingly, but that is not always the case.

To accomplish what you desire, you will need to use a more strict markup than HTML such as XHTML and some sort of preprocessor which can properly parse the document before handing it the browser.

Edit

Here's how chrome interprets this markup. Note the closing </div> tag which does not exist in the html document.

chrome dom http://img138.imageshack.us/img138/794/dom.png

This actually gives me an idea. What if you were to stick an element at the end of your document which your jquery code could look for and any elements which wrapped it could be removed. Something like this:

<div id="d1">
<div id="d2">
</div>
...
<div id="myLastDiv"></div>
</body>

And the JQuery:

while ($("#myLastDiv").parent()[0].tagName.toLowerCase() != "body")
{
    var html = $("#myLastDiv").parent().html();
    $("#myLastDiv").parent().replaceWith(html);
}

This actually does work in Firefox and Chrome and IE8 so long as your script block is not inside the broken element.

Removing empty elements is possible, however:

$(":empty").remove();

I think you'd better fix it at the source. That's simply just not valid in any way.

I would rather parse the pages through Tidy, it can fix most of the problems and comes with a number of options in almost any flavor you want.