Как удалить динамический класс по селектору в jquery? - PullRequest
Новая
       21

Как удалить динамический класс по селектору в jquery?

1 голос
/ 10 мая 2019

Я получил динамические данные в div через Ajax & jQuery, как показано ниже. Я хочу удалить данные в динамическом селекторе. 

<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 Ответ

0 голосов
/ 10 мая 2019

Вы могли бы сделать что-то вроде этого $("[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>
...