Question

我有一些课程

我要删除重复的类名。

注意：类名是动态创建的。我无法更改html，只有我可以更改CSS。

first-of-type不能解决我的问题。

<div class="download-1">some text</div>
<div class="download-12">some text</div>
<div class="download-14">some text</div>
<div class="download-14">some text</div> <--- i want remove this
<div class="download-12">some text</div>

Answer 1

如果您可以选择使用jQuery，则可以按照以下步骤进行操作：

var elem = {};
$('div').each(function() {
   var txt = $(this).attr('class');
   if (elem[txt])
       $(this).remove();
   else
       elem[txt] = true;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="download-1">some text</div>
<div class="download-12">some text</div>
<div class="download-14">some text</div>
<div class="download-14">some text</div>
<div class="download-12">some text</div>

Answer 2

如果您只能编辑css，则可以使用general sibling selector（~）来进行编辑，但是必须为每个类明确声明它，例如：

div.download-12 ~ div.download-12,
div.download-14 ~ div.download-14 {
  display: none;
}

<div class="download-1">some text 1</div>
<div class="download-12">some text 2</div>
<div class="download-14">some text 3</div>
<div class="download-14">some text 4</div> <!-- i want remove duplicates -->
<div class="download-12">some text 5</div>
<div class="download-12">some text 6</div>
<div class="download-14">some text 7</div>

删除具有重复类名的div

2 个答案: