从具有相同ID的多个跨度中删除文本

Question

我有多个跨度

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

我想在单击按钮上删除所有范围内的文字。

我在javascript按钮点击时尝试了这个

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

但它只从第一个范围中删除文字

Answer 1

ID是唯一的，类是可重复的

HTML中id的目的是识别页面上的唯一元素。如果要在多个元素上应用类似的样式或使用类似的脚本，请改用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('');
});

Link to Working Demo | Link to jQuery

或者在Vanilla JS中

如果您不担心支持IE，可以使用vanilla JavaScript执行此操作：

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

Link to Working Demo

注意：您可以将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;
    }
}
}

Link to source

Answer 2

不要为多个标签提供相同的ID，而是使用class

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

调用此函数清除

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

Answer 3

您正在使用依赖于ID的DOM的DOM方法，也就是说，每个DOM只能有一个具有相同ID的元素。

但是，你没有在HTML中使用这种方式的id属性，所以你正在寻找选择器来查询id为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="";
     }
   }

虽然我建议您不要保留相同的ID

http://jsfiddle.net/YysRp/