I want to clear a value of a span inside a div without deleteing other contents only the contents of a span.

ex: body:

<div id="content">
  <span>one</span>

  <input type="text" />
  <input type="text" />

  <span>two</span>
  <span>three</span>

  <select>
        <option selected="selected" value=""></option>
        <option value="Monday">Monday</option>
        <option value="Tuesday">Tuesday</option>
        <option value="Wednesday">Wednesday</option>
        <option value="Thursday">Thursday</option>
        <option value="Friday">Friday</option>
        <option value="Saturday">Saturday</option>
        <option value="Sunday">Sunday</option>
  </select>
</div>

script:

<script type="text/javascript">
function restSel() {
   document.getElementById("#content span").innerHTML="";
};
</script>

Clear all the spans or the content of all the spans.

I want to clear a value of a span inside a div without deleteing other contents only the contents of a span.

ex: body:

<div id="content">
  <span>one</span>

  <input type="text" />
  <input type="text" />

  <span>two</span>
  <span>three</span>

  <select>
        <option selected="selected" value=""></option>
        <option value="Monday">Monday</option>
        <option value="Tuesday">Tuesday</option>
        <option value="Wednesday">Wednesday</option>
        <option value="Thursday">Thursday</option>
        <option value="Friday">Friday</option>
        <option value="Saturday">Saturday</option>
        <option value="Sunday">Sunday</option>
  </select>
</div>

script:

<script type="text/javascript">
function restSel() {
   document.getElementById("#content span").innerHTML="";
};
</script>

Clear all the spans or the content of all the spans.

• javascript
• html
• jquery

• 1 I don't have time to really write you a full answer, but I will say this; your current use of document.getElementById is completely wrong; it accepts a standard string with no special markup, not even spaces. And even then, it only accepts one string. Not two as you currently have; what you have currently is closer to jquery markup. – Daedalus Commented Sep 28, 2012 at 4:43

4 Answers 4

If you were using JQuery ( which will bring you much joy ), then you could do it like this.

$("span").html("");

If you're only using pure JS, you can try this:

document.getElementById("content").getElementsByTagName("span")[0].innerHTML="";

You can replace 0 to any valid index to clear certain span.

Alright, I lied I guess. This is more simpler than I thought, thanks to @Passerby;

for (i = 0; i < document.getElementById('content').getElementsByTagName('span').length; i++) {
    document.getElementById('content').getElementsByTagName('span')[i].innerHTML = '';
}

Using jQuery: To target only the span that are in your div with id = "content" (in case you have other spans in your document:

$('div#content').find('span').html('');