删除具有重复类名的div

以下是一个示例代码，演示如何删除具有重复类名的div：

HTML代码：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
  <div class="box">Box 7</div>
  <div class="box">Box 8</div>
  <div class="box">Box 9</div>
  <div class="box">Box 10</div>
  <div class="box">Box 11</div>
  <div class="box">Box 12</div>
  <div class="box">Box 13</div>
  <div class="box">Box 14</div>
  <div class="box">Box 15</div>
  <div class="box">Box 16</div>
  <div class="box">Box 17</div>
  <div class="box">Box 18</div>
  <div class="box">Box 19</div>
  <div class="box">Box 20</div>
</div>

JavaScript代码：

// 获取所有具有重复类名的div
var boxes = document.querySelectorAll('.box');

// 创建一个空对象，用于存储类名及其出现次数
var classNames = {};

// 遍历每个div
for (var i = 0; i < boxes.length; i++) {
  var className = boxes[i].className;

  // 如果类名已经存在于classNames对象中，则增加出现次数
  if (classNames[className]) {
    classNames[className]++;
  } else {
    // 否则，将类名添加到classNames对象中，并设置出现次数为1
    classNames[className] = 1;
  }
}

// 遍历classNames对象
for (var className in classNames) {
  // 如果某个类名的出现次数大于1，则删除相应的div
  if (classNames[className] > 1) {
    var elements = document.querySelectorAll('.' + className);
    for (var j = 0; j < elements.length; j++) {
      elements[j].parentNode.removeChild(elements[j]);
    }
  }
}

上述代码首先通过document.querySelectorAll('.box')获取所有具有类名为"box"的div元素。然后，通过遍历这些元素，统计每个类名的出现次数，并存储在一个对象中。最后，再次遍历存储类名及其出现次数的对象，如果某个类名的出现次数大于1，则删除相应的div元素。

请注意，上述示例代码仅删除具有重复类名的div，其他没有重复类名的div将保留不变。