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.