How to delete the contents of a paragraph with javascript

Question

I have a paragraph that I'd like to delete the contents of.

document.getElementById(id).innerHTML = "";

doesn't seem to be working. Does anyone have a better solution?

Here's an example

<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("p").innerHTML = "";
</script>
</head>
<body>
<p id="p">
words
</p>
</body>
</html>

but the words in the paragraph are not removed. Thanks in advance to anyone that can help.

Define doesn't to be working. As it currently is you kinda have a pretty crappy problem description. — PeeHaa, Jan 04 '14 at 20:05
The code *will* work, provided you pass the proper id to document.getElementById. My bet is you got a typo somewhere in your HTML or javascript. Not really worth a StackOverflow question IMHO. — kuroi neko, Jan 04 '14 at 20:08
You are trying to remove data that is not there yet. If you really want to do it like this you will have to install the Javascript Crystal Ball library which can remove stuff which is added to the DOM in the future. — PeeHaa, Jan 04 '14 at 20:10
`var p = document.getElementById('p'); while(p.hasChildNodes()) p.removeChild(p.lastChild);` gone, but this would only work if you executed it in the correct spot, or added to the window onload like has been mentioned above. — rlemon, Jan 04 '14 at 20:18
also, see http://stackoverflow.com/questions/4842590/run-function-when-page-is-loaded/4842622#4842622 — rlemon, Jan 04 '14 at 20:22

Mihai Vilcu · Accepted Answer · 2014-01-04T20:29:33.997

4

<!DOCTYPE html>
<html>
<head>
<!-- here the p tag doesn't exist yet -->
<script>
document.getElementById("p").innerHTML = "";
</script>
</head>
<body>
<p id="p">
words
</p>

<!-- however here it does exist -->
</body>
</html>

how to fix it ?

// only use this if you can't move your javascript at the bottom
window.onload = function() {
    document.getElementById("p").innerHTML = "";
}

or move your javascript at the end of the page (this is the preferred one as javascript should always be loaded at the end of the page)

<!DOCTYPE html>
<html>
<head>
<!-- here the p tag doesn't exist yet -->

</head>
<body>
<p id="p">
words
</p>

<!-- however here it does exist -->
<script>
document.getElementById("p").innerHTML = "";
</script>
</body>
</html>

edited Jan 04 '14 at 20:29

answered Jan 04 '14 at 20:21

Mihai Vilcu

1,842
16
22

(IMO) it is smarter for most cases to just place it at the end of the body, then you are executing in natural order and not *waiting* for anything. (just a side note) – rlemon Jan 04 '14 at 20:23
Initially I downvoted this because your first solution is imho a pretty crappy one. Perhaps add a disclaimer so people don't think they should use it? – PeeHaa Jan 04 '14 at 20:23
1

I edited a bit. @PeeHaa he should know and understand the use of both, rlemon yes the js should always be just before – Mihai Vilcu Jan 04 '14 at 20:31

score 0 · Answer 2 · answered Jan 04 '14 at 20:09

0

Be aware you use something that's not in W3C spec... (removing by innerHTML='')

var elem = document.getElementById(id);
if (!elem) {
    console.log("No element for id:"+id);
} else {
    elem.innerHTML="";
    console.log("Should work");
}

answered Jan 04 '14 at 20:09

farvilain

2,326
1
10
23

score 0 · Answer 3 · answered Jan 04 '14 at 20:14

0

Make it a function and add with the body onload event it should work:

<script>
    function empty(){
    document.getElementById("p").innerHTML = "";
    }
</script>
<body onload='empty()'>
<p id="p">
words
</p>
</body>

answered Jan 04 '14 at 20:14

Rings

401
9
18

score 0 · Answer 4 · answered Jan 04 '14 at 20:27

0

I have often use jQuery for this function but, since you are seeking for pure javascript syntax. you will want to use this code:

document.getElementById("p").remove();

answered Jan 04 '14 at 20:27

Faron

1,215
11
19

score 0 · Answer 5 · edited May 12 '19 at 12:54

0

function funboi()
{
  document.getElementById("p").innerHTML = "";
}

    <!-- Just add a button. Works fine-->
    <p id="p">
    words are amazing
    </p>
    <button onclick="funboi()">click to delete</button>

edited May 12 '19 at 12:54

Masoud Keshavarz

1,910
5
26
39

answered May 12 '19 at 10:18

Madhu VP

1

How to delete the contents of a paragraph with javascript

5 Answers5