从DOM元素中删除所有先前的内容

Question

假设我们有这个HTML。 现在的任务是制作一个函数，该函数应使用id="removeAbove"从DOM元素中删除所有先前的内容。

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

尝试了el.previousElementSibling.innerHTML = ""但没有解决问题。 还尝试使用父母。 我正在考虑遍历DOM树，并且当函数找到具有此ID的元素时，先前的项目开始删除。 但是...不知道如何用纯JS实现。

Answer 1

如果要在 removeAbove 之前删除所有元素，则需要一个循环：

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

此解决方案以递归方式删除元素之前的所有内容，并在body元素处停止。

在plnkr上观看实际操作

Answer 2

如果要删除正文中除id="removeAbove"元素之外的所有内容，请尝试以下操作：

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

演示：

 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>