Question

我经常遇到一个问题，我使用getElementById填充div或span元素，通常是通过服务器的Ajax。但是，我希望用户能够做一些简单的事情来清空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（和attachEvent，它的IE对应物。）

Answer 3

如果我正在读这个，那么问你只想一次清除一个div，你可以存储元素的id，然后当用户点击其他地方时从存储的id获取元素并且空白textContent。我希望你正在寻找我可能误解了这个问题。

Answer 4

您可以使用类似......

之类的东西删除所有后代节点

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

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

当然，使用jQuery更简单......

$("#searchresults").empty()

Javascript：快速和脏的空div或其他元素

4 个答案: