Question

Firs off all, I’m not sure if there will be any simple and straight forward answer to this question, but I thought I’ll give it a go and try to ask.

I have this very messy bit of code:

<table cellspacing="0" cellpadding="2" border="0" width="100%"><tbody><tr><td><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td><h3 class="ListItemNameLink"><a href="#">Elit eros pulvinar</a></h3></td><td class="ProductRef"> </td></tr></tbody></table></td></tr><tr><td/></tr><tr><td><a href="#"><img border="0" width="217" height="252" src="01.jpg" alt="01"/></a></td></tr><tr><td/></tr><tr><td>Price: <strong>£12.30 (Ex VAT)</strong></td></tr><tr><td/></tr><tr><td><table cellspacing="2" cellpadding="0" border="0" width="100%"><tbody><tr><td class="ProductDetailLink"/></tr></tbody></table></td></tr></tbody></table>

It obviously come from a CMS and this tables are autogenerated.

What I’m trying to get out of this markup, is this:

<div class="title"><h3><a href="#">Elit eros pulvinar</a></h3></div><div class="image"><a href="#"><img border="0" width="217" height="252" src="01.jpg" alt="01"/></a></div><div class="price">Price: <strong>£12.30 (Ex VAT)</strong></div>

Can anyone help please?

Answer 1

i think i figure that out. This function helped me remove all the tables. Thought might be useful to someone.

jQuery.fn.unwrap = function (el) {
return this.each( function(){
  $(this.childNodes).appendTo(this.parentNode );
});

};

$('.banner tr, .banner td, .banner table, .banner tbody').unwrap().remove();

Thanks