Javascript：快速且骯臟的空div或其他元素

Question

我經常遇到一個問題，在該問題中，我通常使用服務器上的Ajax使用getElementById填充div或span元素。 但是，我希望用戶能夠做一些簡單的事情來清空div並返回到頁面以前的狀態。 例如，單擊頁面上的其他位置。 我一直在求助於放置一個折疊圖標，單擊該圖標可以重新加載頁面，但這顯然不是最佳解決方案。

誰能建議一種簡單的方法來清除div。 我有一個直覺，那就是找到合適的處理程序，但是我對處理程序並不了解。 如果可以使用相同的腳本，那就太好了，但是歡迎任何方法。

現在，它提供了一個腳本，該腳本可以捕獲選擇並進行搜索。 如果結果沒有用，我想讓用戶點擊並清空div。 但是，問題確實一直存在。 這是我現在正在使用的縮寫代碼。

JS

function getSelection() {
  var sel = getSelection();
  if (sel=""){
    alert("Please select text");
  } else {
    //grab selection and search on it using Ajax
    //code for browsers...
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById('searchresults').textContent=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","search.php?q="+sel,true);
    xmlhttp.send();
  }
}

的HTML

<a href="javascript:void(0)" onclick="getSelection()">click</a>

Answer 1

你為什么不使用

document.getElementById('searchresults').textContent="";

如果您有jQuery，那么

$("#searchresults").empty();

Answer 2

您具有執行此操作的所有要素。 您的getSelection函數的一部分：

var clear = function(){
  document.getElementById('searchresults').textContent = "";
};

<a href="javascript:void(0)" onclick="clear()">clear</a>

注意：一個卑鄙的建議：您應該從將內聯JS添加到綁定事件處理程序中畢業。

---

清除內容時的點擊外單程searchresults檢測可以通過在停止事件的傳播來實現searchresults任何click下產生searchresults 。 但是，清除它在document級別的任何click之外的searchresults 。

var searchresults = document.getElementById("searchresults")​;
var stop = function(evt){
    evt.stopPropagation();
};
var clear = function(){
    searchresults.innerHTML = "";
};
searchresults.addEventListener("click", stop, false);
document.addEventListener("click", clear, false);

為此，您需要使用addEventListener （以及與其對應的IE對應的attachEvent ）。

Answer 3

如果我沒看錯，然后問，因為您一次只想清除一個div，則可以存儲該元素的ID，然后當用戶單擊其他位置時，從存儲的ID中獲取該元素，然后將textContent清空。 我希望這就是您尋找的東西，我可能會誤解了這個問題。

Answer 4

您可以使用以下內容刪除所有后代節點：

var parentNode = document.getElementById('searchresults');

while (parentNode.hasChildNodes()) {
    parentNode.removeChild(parentNode.firstChild);
}

當然，使用jQuery更簡單...

$("#searchresults").empty()