Delete HTML node without deleting its children

Question

I'm having an issue that i'm not able so solve of find a solution.

I want to delete the paragraph without deleting the input. Is there any way to do it?

<p id="test">
    <input type="submit" value="testInput">
</p>

For the moment i'm trying this Javascript code, but i'm deleting everithing.

var elem = document.getElementById('test');
elem.parentNode.removeChild(elem);

Any idea if it's possible?

var elem = document.getElementById('test');
 elem.parentNode.removeChild(elem);

<p id="test">
 <input type="submit" value="test">
</p>

@Katherina jsfiddles aren't necessary in all situations - this isn't really one of them. The problem is clear without it. — James Thorpe, Mar 24 '15 at 16:03
Would still help specially for testing. It's not that uploading a fiddle is really something difficult:) — , Mar 24 '15 at 16:04
Similar question here http://stackoverflow.com/questions/4232961/remove-a-html-tag-but-keep-the-innerhtml with answer provided both in jquery and in javascript — Craicerjack, Mar 24 '15 at 16:09

David Thomas · Accepted Answer · 2015-03-24T16:41:17.230

The easiest way is to simply move the contents of the element before, or after, the element you want to remove and then remove the element itself:

var elem = document.getElementById('test'),
  frag = document.createDocumentFragment();

while (elem.firstChild) {
  frag.appendChild(elem.firstChild);
}

elem.parentNode.insertBefore(frag, elem);
elem.parentNode.removeChild(elem);

<p id="test">
  <input type="submit" value="test">
  <input type="submit" value="test">
  <input type="submit" value="test">
  <input type="submit" value="test">
</p>

Or, as a method of an HTMLElement:

HTMLElement.prototype.unwrapChildren = function() {
  var frag = document.createDocumentFragment(),
    parent = this.parentNode;

  while (this.firstChild) {
    frag.appendChild(this.firstChild);
  }

  parent.insertBefore(frag, this);
  parent.removeChild(this);

};

document.getElementById('test').unwrapChildren();

<p id="test">
  <input type="submit" value="testInput">
</p>

Or, alternatively, using Node.replaceChild():

var elem = document.getElementById('test'),
  parent = elem.parentNode,
  frag = document.createDocumentFragment();

while (elem.firstChild) {
  frag.appendChild(elem.firstChild);
}

parent.replaceChild(frag, elem);

<p id="test">
  <input type="submit" value="testInput">
</p>

References:

No problems, all the approaches shown should work well (barring any surprises in your own code). — David Thomas, Mar 24 '15 at 16:42
@Wodash The approaches here are better than my answer - they will keep the nodes in the same place relative to where the parent was. Depending on the structure of the DOM, my answer may end up moving content around, not just removing it from the parent. — James Thorpe, Mar 24 '15 at 17:12
@JamesThorpe i saw it, but my work time for tomorrow was over, i'll try it now — Wodash, Mar 25 '15 at 13:43

score 2 · Answer 2 · answered Mar 24 '15 at 16:13

It's a matter of moving all the current contents, then removing the node:

//Start with your original element
var elem = document.getElementById('test');

//While it contains children, append the first to the parent node
//This will also remove it from the current element
while (elem.childNodes.length > 0) {
    elem.parentNode.appendChild(elem.childNodes[0]);
}

//Finally remove the element
elem.parentNode.removeChild(elem);

score 0 · Answer 3 · answered Mar 24 '15 at 16:12

What you can do is select all of the element's children using querySelectorAll, then re-add them to the parent element, as shown below. I've changed the background color of #test to show that the paragraph is actually deleted.

// Select all children of your p#test element. Stored in an array.
var input = document.querySelectorAll('#test > *');

// Select your p#test element
var elem = document.getElementById('test');
var parent = elem.parentNode;

// Removes p#test
parent.removeChild(elem);

// Iterates through each item in input and re-adds them into the parent element
for (var i = 0, c = input.length; i < c; i++) {
  parent.appendChild(input[i]);
}

#test {
  background-color: #900;
}

<p id="test">
  <span>Hi!</span>
  <input type="submit" value="Click here" />
</p>

Delete HTML node without deleting its children

3 Answers3