javascript - 从具有相同 id 的多个 span 中删除文本

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是标识页面上的唯一元素。如果您想在多个元素上应用相似的样式或使用相似的脚本，请改用 a 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('');
});

链接到工作演示| 链接到 jQuery

或者在香草 JS

如果你不担心支持 IE，你可以用 vanilla 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 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 = '';

这不是开箱即用的，您还需要将innerHTMLsetter 添加到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/