Javascript delete div Element

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>

`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? — CBroe, Mar 17 '13 at 04:20
You need to pass the element's reference to the cc function, or make element a global var. — Rutwick Gangurde, Mar 17 '13 at 04:20
Possible duplicates: [creating and removing div element in javascript](http://stackoverflow.com/questions/6152132/creating-and-removing-div-element-in-javascript) and [JavaScript: remove element by id](http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id) — Alina B., Mar 17 '13 at 04:23

novalagung · Answer 1 · 2017-04-20T07:36:01.297

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

edited Apr 20 '17 at 07:36

answered Mar 17 '13 at 05:30

novalagung

10,905
4
58
82

score 1 · Answer 2 · edited May 23 '17 at 12:09

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 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.net/daCrosby/MMywX/1/

score 0 · Answer 3 · answered Mar 17 '13 at 04:24

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

score 0 · Answer 4 · answered Jul 18 '16 at 09:36

0

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/

answered Jul 18 '16 at 09:36

Dayron Gallardo

1,502
2
21
37

Javascript delete div Element

4 Answers4