从具有相同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，我推荐使用 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

注意：可以在IE中添加getElementsByClassName

我不建议这样做，因为只使用 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

你使用的 DOM 方法依赖于 ID 的 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/