Remove all previous content from a DOM element

Question

Let's say we have this HTML. The task is to make a function that should remove all previous content from the DOM element with id="removeAbove"

<nav class="navbar>
  <div class="container">
    <div class="navbar-header">
      <button type="button">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse">
      <form class="navbar-form">
        <div class="form-group">
          <input type="text">
        </div>
        <div class="form-group">
          <input type="password">
        </div>
        <button type="submit" class="btn">Sign in</button>
      </form>
    </div>
  </div>
</nav>

<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a template</p>
    <p id="removeAbove"><a class="btn" href="#">Learn more</a></p>
  </div>
</div>

Tried el.previousElementSibling.innerHTML = "" but didn't solve the problem. Also tried using the parents. I am thinking about traversing the DOM tree and when the function finds the element with this ID, the previous items start deleting. But...no idea how this could be achieved with pure JS.

Answer 1

If you want to remove all the elements before removeAbove , you'll need a loop:

removeAllBefore(document.getElementById('removeAbove'));
function removeAllBefore(el)
{
  var prevEl;
  while (prevEl = el.previousElementSibling)
    prevEl.parentNode.removeChild(prevEl);
  if (el.parentNode.tagName.toUpperCase() != 'BODY')
    removeAllBefore(el.parentNode);
}

This solution removes everything before the element, recursively, and stops at the body element.

See it in action at plnkr

Answer 2

If you want to remove everything in the body except the element with the id="removeAbove" please try this:

var el = document.getElementById("removeAbove");

(function removeAllChilds(el, protected) {
    //Make the protected elemnt the last in the list !
    el.appendChild(protected);
    //Remove all child but the protected
    while (el.firstChild && el.firstChild !== protected) el.removeChild(el.firstChild);
    //If we reachthe body we stop
    if (el.tagName.toLowerCase() === 'body') return;
    //Call the function with the parent element
    removeAllChilds(el.parentElement, el);

})(el.parentElement, el);

Demo:

 var el = document.getElementById("removeAbove"); (function removeAllChilds(el, protected) { //Make the protected elemnt the last in the list ! el.appendChild(protected); //Remove all child but the protected while (el.firstChild && el.firstChild !== protected) el.removeChild(el.firstChild); //If we reachthe body we stop if (el.tagName.toLowerCase() === 'body') return; //Call the function with the parent element removeAllChilds(el.parentElement, el); })(el.parentElement, el); 

 <div class="wrapper"> <div>Some div</div> <nav class="navbar"> <div class="container"> <div class="navbar-header"> <button type="button"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse"> <form class="navbar-form"> <div class="form-group"> <input type="text"> </div> <div class="form-group"> <input type="password"> </div> <button type="submit" class="btn">Sign in</button> </form> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <h1>Hello, world!</h1> <p>This is a template</p> <p id="removeAbove"><a class="btn" href="#">Learn more</a></p> </div> </div> </div>