Question

我在JavaScript中实现了一个秒表。

我想在按下clear按钮时删除其他div元素。我添加了函数cc();，但function cc()不起作用。我的代码出了什么问题？

使用Javascript：

a = 0;
myButton = 0;

function myWatch(flug) {
  if(myButton == 0) {
    Start = new Date();
    myButton = 1;
    document.myForm.myFormButton.value = "Stop!";
    myInterval = setInterval("myWatch(1)", 1);
  } else {
    if(flug == 0) {
      myButton = 0;
      document.myForm.myFormButton.value = "Start";
      clearInterval(myInterval);
    }
    Stop = new Date();
    T = Stop.getTime() - Start.getTime();
    H = Math.floor(T / (60 * 60 * 1000));
    T = T - (H * 60 * 60 * 1000);
    M = Math.floor(T / (60 * 1000));
    T = T - (M * 60 * 1000);
    S = Math.floor(T / 1000);
    Ms = T % 1000;
    document.myForm.myClick.value = H + ":" + M + ":" + S + ":" + Ms;
  }
}
b = 0;

function stop() {
  b++;
  stopa();
}

function stopa() {
  var element = document.createElement('div');
  element.id = pos;
  var objBody = document.getElementsByTagName("body")
    .item(0);
  objBody.appendChild(element);
  rap = "";
  rap = "rap" + b + "=" + H + ":" + M + ":" + S + ":" + Ms;
  element.innerHTML = rap;
}

function cc() {
  document.body.removeChild(element);
}

HTML：

<form name="myForm" action="#">
  <input type="text" size="20" name="myClick">
  <input type="button" value="Start" name="myFormButton" onclick="myWatch(0)" />
  <input type="button" value="Rap" name="Rap" onclick="stop()">
  <input type="button" value="clear" name="clear" onclick="cc()">
</form>
<h3>
  <div id="pos">
  </div>
</h3>

Answer 1

尝试将上下文作为参数显式传递给cc()函数。

JS

function cc(el) {
    el.parentNode.removeChild(el);
}

HTML

<input type="button" value="clear" name="clear" onclick="cc(this)">

Answer 2

打开您的控制台。它存在于大多数主流浏览器中，可以帮助您加载JS开发。

例如，if you look at your code exactly as is，您收到错误消息：

Uncaught ReferenceError: element is not defined

正如有几个人所说，它是a variable scope issue。有一些简单的修复，最简单的方法就是让element具有更大的范围 - 也就是说，首先在函数之外定义它。

var element = null;

然后在stopa中，不要使用var，因为它会创建一个新的本地变量，而不是使用全局变量。

element = document.createElement('div');

您会注意到的下一个问题是element中的cc仍未引用正确的元素 - 这是因为在以下行中，未定义pos。

element.id = pos;

再次，看看控制台（现在更具体地说，在HTML部分而不是JS，但它在相同的开发人员选项中）。你会注意到创建的元素的ID是[object HTMLDivElement] - 而不是“pos”。我建议您不要担心给他们id，您的HTML中已经有一个ID为pos的div，只需将结果附加到body而不是objBody = document.getElementById("pos");。

pos

然后当你清除时，清除while (objBody.hasChildNodes()) { objBody.removeChild(objBody.lastChild); } document.myForm.myClick.value = "";中的所有孩子（你还要清除我确定的文本框，所以你走了）

element

现在注意我们不再需要objBody是全局的，因为它只在一个函数中引用 - 它可以是该函数的本地函数。但是，现在stopa和cc引用了element，因此我们会像var那样将其设为全局，并确保以后对它的所有引用都不会包括var element = null;。

{{1}}

添加一些错误检查（例如，在单击“开始”之前清除会导致错误），您就可以开始了！

http://jsfiddle.net/daCrosby/MMywX/1/

Answer 3

函数cc不知道'元素'是什么。解决这个问题的最简单方法是使用jquery。删除div时，请执行

之类的操作

$('#pos').remove()

这会找到id为'pos'的div并将其删除。如果它不仅仅是'pos'，你可能需要将div的id传递给cc。

Answer 4

现代浏览器支持元素上的 remove（）方法。您不需要将外部库用作jQuery或长代码。它很简单：

var x = document.getElementById("myElement");
x.remove();

这里的工作例子 - ＆gt; https://jsfiddle.net/tmj3p7t5/

Javascript删除div元素

4 个答案: