[英]Remove all previous content from a DOM element
假設我們有這個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實現。
如果要在 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
元素處停止。
如果要刪除正文中除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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.