html - Javascript delete div Element - Stack Overflow

admin管理员组

文章数量:1430549

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>

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>

• javascript
• html
• stopwatch

Share Improve this question Follow edited Mar 17, 2013 at 4:17 hexacyanide 91.9k3131 gold badges166166 silver badges162162 bronze badges asked Mar 17, 2013 at 4:05 Tatsuru IwamotoTatsuru Iwamoto 1111 silver badge33 bronze badges 3

• 2 element is a local variable in your stopa function - cc does not know any variable of that name. Looks like you are missing knowledge of absolute JS basics ... maybe you should work through a few tutorials first? – C3roe Commented Mar 17, 2013 at 4:20
• 1 You need to pass the element's reference to the cc function, or make element a global var. – Rutwick Gangurde Commented Mar 17, 2013 at 4:20
• Possible duplicates: creating and removing div element in javascript and JavaScript: remove element by id – Alina B. Commented Mar 17, 2013 at 4:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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)">

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 remend not even worrying about giving them ids, 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/daCrosby/MMywX/1/

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'.

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/tmj3p7t5/

本文标签： htmlJavascript delete div ElementStack Overflow