从具有相同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是唯一的,类是可重复的

idHTML中的目的是识别页面上的唯一元素.如果要在多个元素上应用类似的样式或使用类似的脚本,请使用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,可以使用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;
    }
}
}

链接到源