CODEWITHSUNDEEP
javascripthtml
Wodash
Wodash

Reputation: 23

Delete HTML node without deleting its children

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>

Upvotes: 2

Views: 689

Answers (3)

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 2

James Thorpe
James Thorpe

Reputation: 32202

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);

Upvotes: 2

Chris Forrence
Chris Forrence

Reputation: 10094

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>

Upvotes: 0

Related Questions