javascript - 清空JavaScript中的许多span元素

我在我的网页上有这些跨度，我正试图清空他们的网页加载内HTML。
但我不想对所有的document.getElelmentById().innerHTML = '';span都执行100操作，如果有一种方法可以使用它们的类名清空它们。

$(document).ready(function() {
  $a = document.getElementsByClassName("char_counter");
  for (i = 0; i < $a.length; i++) {
    console.log($a[i]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="char_counter" id="one">1</span>
<span class="char_counter" id="two">2</span>
<span class="char_counter" id="three">3</span>
<span class="char_counter" id="four">4</span>

最佳答案

不需要循环所有元素并将innerHTML设置为空字符串。
您可以使用html()或text()将其innerHTML设置为空。

$('.char_counter').html('');

将选择具有类char_counter的所有元素，并将其innerHTML设置为空字符串。
更具体地说，您还可以使用

$('span.char_counter').html('');

演示

$(document).ready(function() {
  $('.char_counter').html('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="char_counter" id="one">1</span>
<span class="char_counter" id="two">2</span>
<span class="char_counter" id="three">3</span>
<span class="char_counter" id="four">4</span>