如何通过 jquery 中的选择器删除动态类？

Posted 2023-05-09

【中文标题】如何通过 jquery 中的选择器删除动态类？

【英文标题】：How to remove dynamic class by selector in jquery?

【发布时间】：2019-09-28 04:52:12

【问题描述】：

我已经通过 Ajax 和 jQuery 检索了 div 中的动态数据，如下所示。我想删除动态选择器上的数据。

<div class="Data">
    <h3 class="" id="">Content 1</h3>
    <h4 class="Class1_/PLnivLL/37nmM3g8DstjQ== ">Monday 13 May 2019</h4>
    <div class=" Class2_/PLnivLL/37nmM3g8DstjQ==">
        <span class="Class7_/PLnivLL/37nmM3g8DstjQ==" data-price="1234">Rs.
            1234
        </span>
        <a data="/PLnivLL/37nmM3g8DstjQ==" data-added="1" class="LinkRemove" data-slot="Class3_/PLnivLL/37nmM3g8DstjQ=="
            href="javascript:void(0)">X Remove </a>
    </div>
    <a class="Class4_/PLnivLL/37nmM3g8DstjQ==" data="/PLnivLL/37nmM3g8DstjQ==" href="javascript:void(0)">Upgrade
    </a>
    <div class="Class5_/PLnivLL/37nmM3g8DstjQ==">Content</div>
    <hr class="Class6_/PLnivLL/37nmM3g8DstjQ==">
    <h4 class="Class1_cq0M/ZRAlj+DU+sc7iQV/w== ">Sunday 12 May 2019</h4>
    <div class=" Class2_cq0M/ZRAlj+DU+sc7iQV/w==">
        <span class="Class7_cq0M/ZRAlj+DU+sc7iQV/w==" data-price="1234">Rs.
            1234
        </span>
        <a data-slot="Class3_cq0M/ZRAlj+DU+sc7iQV/w==" class=" LinkRemove" data="cq0M/ZRAlj+DU+sc7iQV/w=="
            href="javascript:void(0)">X Remove </a>
    </div>
    <a class="Class4_cq0M/ZRAlj+DU+sc7iQV/w==" href="javascript:void(0)" data-added="1" data="2019-05-12"
        style="background-color:#eaeaea;color:#005e20;">Upgrade
    </a>
    <div class="Class5_cq0M/ZRAlj+DU+sc7iQV/w==">Content</div>
    <hr class="Class6_cq0M/ZRAlj+DU+sc7iQV/w==">
</div>

我在类中放置了加密文本。当我尝试通过 jQuery 动态删除选择器类时，如下所示。

$(document.body).on('click', '.LinkRemove', function () 

    var data = $(this).attr("data");    
    $(".Class2_" + data).remove();
    $(".Class3_" + data).remove();
    $(".Class4_" + data).remove();
    $(".Class5_" + data).remove();
    $(".Class6_" + data).remove();
    $(".Class7_" + data).remove();
);

我收到如下错误。

Error: Syntax error, unrecognized expression: .Class2_/PLnivLL/37nmM3g8DstjQ==

如何通过动态选择器类删除内容？

【参考方案1】：

你可以这样做$("[class$='" + data + "']").remove();

这将删除那些类以data结尾的元素

演示

$(document.body).on('click', '.LinkRemove', function() 
  var data = $(this).attr("data");
  
  $("[class$='" + data + "']").remove();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Data">
  <h3 class="" id="">Content 1</h3>
  <h4 class="Class1_/PLnivLL/37nmM3g8DstjQ== ">Monday 13 May 2019</h4>
  <div class=" Class2_/PLnivLL/37nmM3g8DstjQ==">
    <span class="Class7_/PLnivLL/37nmM3g8DstjQ==" data-price="1234">Rs.
            1234
        </span>
    <a data="/PLnivLL/37nmM3g8DstjQ==" data-added="1" class="LinkRemove" data-slot="Class3_/PLnivLL/37nmM3g8DstjQ==" href="javascript:void(0)">X Remove </a>
  </div>
  <a class="Class4_/PLnivLL/37nmM3g8DstjQ==" data="/PLnivLL/37nmM3g8DstjQ==" href="javascript:void(0)">Upgrade
    </a>
  <div class="Class5_/PLnivLL/37nmM3g8DstjQ==">Content</div>
  <hr class="Class6_/PLnivLL/37nmM3g8DstjQ==">
  <h4 class="Class1_cq0M/ZRAlj+DU+sc7iQV/w== ">Sunday 12 May 2019</h4>
  <div class=" Class2_cq0M/ZRAlj+DU+sc7iQV/w==">
    <span class="Class7_cq0M/ZRAlj+DU+sc7iQV/w==" data-price="1234">Rs.
            1234
        </span>
    <a data-slot="Class3_cq0M/ZRAlj+DU+sc7iQV/w==" class=" LinkRemove" data="cq0M/ZRAlj+DU+sc7iQV/w==" href="javascript:void(0)">X Remove </a>
  </div>
  <a class="Class4_cq0M/ZRAlj+DU+sc7iQV/w==" href="javascript:void(0)" data-added="1" data="2019-05-12" style="background-color:#eaeaea;color:#005e20;">Upgrade
    </a>
  <div class="Class5_cq0M/ZRAlj+DU+sc7iQV/w==">Content</div>
  <hr class="Class6_cq0M/ZRAlj+DU+sc7iQV/w==">
</div>

【讨论】：

对于 content<div class="Con slot_PtIk/5ugrLCFZV1303yDpw== selected" data-data="PtIk/5ugrLCFZV1303yDpw==" > 出现类似 Syntax error, unrecognized expression: .slot_PtIk/5ugrLCFZV1303yDpw== 的错误