Javascript删除div元素

Question

I am implementing a Stopwatch in JavaScript.

I want to delete additional div elements when pushing a clear button. I added function cc(); , but function cc() doesn't work. What's wrong with my code?

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

Try to pass the context explicitly as parameter on the cc() function.

js

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

html

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

Answer 2

Open up your Console. It's found in most major browsers and will help you loads with JS development.

For example, if you look at your code exactly as is , you get an error:

Uncaught ReferenceError: element is not defined

As several have said, it's a variable scope issue . There's a few easy fixes, the easiest being simply making element have a larger scope - that is, define it outside of your functions first.

var element = null;

and then in stopa , don't use var because it'll make a new, local variable instead of using the global one.

element = document.createElement('div');

The next problem you'll notice is that element in cc still doesn't refer to the correct element - this is because in the following line, pos is not defined.

element.id = pos;

Again, take a look at the Console (now more specifically at the HTML section than the JS, but it's in the same developer options). You'll notice the created element's ID is [object HTMLDivElement] - not "pos". I'd recommend not even worrying about giving them id s, you have a div with id pos already in your HTML, simply append your results to that instead of the body .

objBody = document.getElementById("pos");

Then when you clear, clear all children from pos (you'll also want to clear the text box I'm sure, so here ya go)

while (objBody.hasChildNodes()) {
  objBody.removeChild(objBody.lastChild);
}
document.myForm.myClick.value = "";

Notice now we no longer need element to be global, because it's only referenced in one function - it can be local to that function. However, objBody is now referenced in stopa and cc , so we'll make it global as we did with element and simply ensure all future references to it don't include var .

var element = null;

Add some error checking (clearing before you click Start causes errors, for example) and you're good to go!

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

Answer 3

The function cc has no idea what 'element' is. The easiest way to fix this is to use jquery. When you delete the div, do something like

$('#pos').remove()

This finds the div with id 'pos' and removes it. You may need to pass the id of the div to cc if it's not just 'pos'.

Answer 4

Modern browsers supports remove() method on the element. You don't need to use external libraries as jQuery or long code. It's simple as :

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

Working exemple here -> https://jsfiddle.net/tmj3p7t5/