Is it possible to remove or change an html element and keep your kids with javascript?

Question

I have the following structure. I would like to remove the div.son longer maintain the div.grandson, Is that possible?! or changing yours <tag> would also be a solution.. e.g. change <fieldset> for a <div>, remembering that I do not have access to HTML, every change should be made through javascript!

<div class="father">
  <fieldset class="son">
    <div class="grandson">//--> Content here</div>
    <div class="grandson">//--> Content here</div>
    <div class="grandson">//--> Content here</div>
  </fieldset>
</div>

I tried to use the function removeChild() of javascript, but it removes the whole element..

From now on, thank you!

Answer 1

It’s possible, follow the code:

var father = document.getElementsByClassName('father')[0],
    //grandson = document.getElementsByClassName('grandson'); // descomentar essa linha e comentar a de baixo para resultado interessante
    grandson = document.querySelectorAll('.grandson');

console.log(document.getElementsByClassName('son'));
console.log(grandson);

for (var i = 0; i < grandson.length; i++) {
    console.log(grandson[i]);
    father.appendChild(grandson[i]);
}

father.removeChild(document.getElementsByClassName('son')[0]);
console.log(document.getElementsByClassName('son'));

<div class="father">
  <fieldset class="son">
    <div class="grandson">Content here 1</div>
    <div class="grandson">Content here 2</div>
    <div class="grandson">Content here 3</div>
  </fieldset>
</div>