ansaurus

Question

Answer 1

+4 A:

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.

Daniel A. White 2010-01-14 18:25:11

Finding empty divs is certainly possible...though not likely very performant...an not likely the Right Solution

Michael Haren 2010-01-14 18:27:14

@Daniel :Are you sure about that ? Because this is what I am doing for three days and they are working pretty good.

Braveyard 2010-01-14 18:27:46

@Micheal : Performance is the least concern right now to me. I need it :)

Braveyard 2010-01-14 18:28:34

I'm pretty sure.

Daniel A. White 2010-01-14 18:29:05

Doesn't what change DOM also effect HTML structure ?

Braveyard 2010-01-14 18:38:05

Well the DOM is an analysis of the document to fit the rendering engine. There would be no way to know which element is causing it to fail your presentation requirements.

Daniel A. White 2010-01-14 18:39:51

Thanks for the explanation. But the W3C validator is fixing the problems or just shows where the problems are ?

Braveyard 2010-01-14 18:52:44

It will show you where the problems are.

Daniel A. White 2010-01-14 20:02:36

Answer 2

+1 A:

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

Viktor Klang 2010-01-14 18:28:09

Answer 3

+3 A:

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 ?

Gaby 2010-01-14 18:29:00

Great point! Doesn't answer the question tho.

Daniel A. White 2010-01-14 18:32:22

indeed .. should have left it as a comment ..

Gaby 2010-01-14 20:21:21

Answer 4

+2 A:

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

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();

Joel Potter 2010-01-14 18:29:19

Answer 5

+1 A:

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.

yannis 2010-01-14 19:02:56

ansaurus

tags:

views:

answers:

Delete unclosed tag elements via jQuery

related questions