Remove parent two div while child will remain same

Question

I have a requirement in which i have to replace this html code to new html code

Current Html`

<td class="dataCol  first "><div class="requiredInput">
 <div class="requiredBlock"></div>
<select id="pageLeadNew:frmLeadNew:pbLeadNew:pbsCorporateAccounts:IdCompanyTyp" name="pageLeadNew:frmLeadNew:pbLeadNew:pbsCorporateAccounts:IdCompanyTyp" onchange="FuntomangeCorpSection();"><option value="">--None--</option><option value="Sub National">Sub National</option>
<option value="Regional Account">Regional Account</option>
<option value="Hotel">Hotel</option>
<option value="Embassy">Embassy</option>
<option value="Fleet Operator">Fleet Operator</option>
<option value="Association">Association</option>
<option value="Others">Others</option>
</select></div></td>

`

Required Html`

<td class="dataCol  first ">
<select id="pageLeadNew:frmLeadNew:pbLeadNew:pbsCorporateAccounts:IdCompanyTyp" name="pageLeadNew:frmLeadNew:pbLeadNew:pbsCorporateAccounts:IdCompanyTyp" onchange="FuntomangeCorpSection();"><option value="">--None--</option><option value="Sub National">Sub National</option>
<option value="Regional Account">Regional Account</option>
<option value="Hotel">Hotel</option>
<option value="Embassy">Embassy</option>
<option value="Fleet Operator">Fleet Operator</option>
<option value="Association">Association</option>
<option value="Others">Others</option>
</select></td>`

i have to remove current Html code with required html code in which i have to remove to div with class name requiredInput and requiredBlock

please help thanks in advance..!!

Answer 1

Unwrap is what you need, removes the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

$('.requiredInput').contents().unwrap();
$('.requiredBlock').remove()

Answer 2

Assuming you have jQuery

var datacol = $('td.dataCol.first');
datacol.find('div.requiredBlock').remove();
datacol.find('div.requiredInput').contents().unwrap();