Delete text from multiple spaces with the same identifier

Question

I have a few intervals

<span id ="myId">data1</span>
<span id ="myId">data2</span>
<span id ="myId">data3</span>
<span id ="myId">data4</span>
<span id ="myId">data5</span>

I want to delete text within the entire range with the click of a button.

I tried this on button click in javascript

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

but it only removes text from the 1st range

Answer 1

Do not specify the same identifiers for more than one tag, use the class instead

  <span class ="myId">data1</span>
  <span class ="myId">data2</span>
  <span class ="myId">data3</span>
  <span class ="myId">data4</span>
  <span class ="myId">data5</span>

call this function to clear

function clearAll()
{
    var ele= document.getElementsByClassName("myId");
    for(var i=0;i<ele.length;i++)
    {
      ele[i].innerHTML='';
    }
}

Answer 2

Identifiers are unique, classes are repeatable

id HTML . , class:

<span class="myClass">data1</span>
<span class="myClass">data2</span>
<span class="myClass">data3</span>
<span class="myClass">data4</span>
<span class="myClass">data5</span>

<input type="button" id="clearbutton" value="Clear Data">

, . jQuery, , IE getElementsByClassName:

$('#clearbutton').click(function() {
    $('.myClass').text('');
});

| jQuery

Vanilla JS

IE, JavaScript:

function clearSpans() {
    var spans = document.getElementsByClassName("myClass");
    for(var i=0; i < spans.length; i++) ele[i].innerHTML='';
}

. getElementsByClassName IE

, jQuery, IE :

onload=function(){
if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }

        return results;
    }
}
}

Answer 3

DOM, DOM , DOM, .

id HTML, , myId, , CSS:

document.querySelectorAll("#myId").innerHTML = '';

, innerHTML NodeList, :

Object.defineProperty(NodeList.prototype, "innerHTML", {
    set: function (html) {        
        for (var i = 0; i < this.length; ++i) {
            this[i].innerHTML = html;
        }
    }
});

-: http://jsfiddle.net/Pj4HD/

Answer 4

   var spans=document.getElementsByTagName("span");
   for(var i=0;i<spans.length;i++){
     if(spans[i].id=="myId"){
      spans[i].innerHTML="";
     }
   }

Although I suggest you not keep the same identifiers

http://jsfiddle.net/YysRp/