Как использовать метод dataset в jQuery?

141
24 января 2021, 23:30

У меня возник вопрос, как я могу удалить блоки через dataset. Чтобы каждый блок удалялся по отдельности по клику. У меня происходит немного иначе. Первый блок удаляется нажатие на кнопку, а вот второй нет. Все два блока удаляются.Подскажите пожалуйста

$('.remove').on('click', function() { 
  $('[data-product-id="1"]').remove(); 
  $('[data-product-id="2"]').remove(); 
});
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="cart" data-product-id="1"> 
  <span class="remove"><a href="#"><i class="fas fa-ban"></i></a></span> 
</div> 
 
<div class="cart" data-product-id="2"> 
  <span class="remove"><a href="#"><i class="fas fa-ban"></i></a></span> 
</div>

Answer 1

Осмелюсь предположить, что при нажатии на .remove, вам нужно удалить .cart, в котором находится тот самый .remove.
Если да, то для этого не обязательно иметь какой-то data атрибут, достаточно наследия.

$('.remove').on('click', function() { 
  let parent = $(this).closest('.cart') 
  parent.remove(); 
  console.info(parent.data('product-id')); 
});
.cart { 
  background: #ccc; 
  margin-bottom: 10px; 
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="cart" data-product-id="1"> 
  <span class="remove"><a href="#"><i class="fas fa-ban"></i></a></span> 
</div> 
 
<div class="cart" data-product-id="2"> 
  <span class="remove"><a href="#"><i class="fas fa-ban"></i></a></span> 
</div>

Answer 2

$(document).ready(function() { 
  
 $('.remove').on('click', function () { 
    $(this).remove();  
  }); 
   
}); 
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="cart" data-product-id="1"> 
  <span class="remove"> 
    <a href="#"><i class="fas fa-ban">Удалить только 1</i></a> 
  </span> 
</div> 
<div class="cart" data-product-id="2"> 
  <span class="remove"> 
    <a href="#"><i class="fas fa-ban">Удалить только 2</i></a> 
  </span> 
</div> 
<div class="cart" data-product-id="3"> 
  <span class="remove"> 
    <a href="#"><i class="fas fa-ban">Удалить только 3</i></a> 
  </span> 
</div>

как видите для удаления не требуется data-product-id

READ ALSO
Не изменяется цвет ссылки при наводке хотя так работает с почтой

Не изменяется цвет ссылки при наводке хотя так работает с почтой

Я использую шаблон сайта и хотел бы спросить где параметр находится который изменяет цвет ссылки при наводкеЯ уже пробовал менять параметры...

107
варианты meta description

варианты meta description

Какие варианты description допускаются в мета теге? Те

129
Не могу выбрать элемент JS [дубликат]

Не могу выбрать элемент JS [дубликат]

Есть div class="top", выбираю в нём строку пустой таблицы с помощью documentquerySelector(

130
Сделать прокрутку в бок

Сделать прокрутку в бок

Как сделать горизонтальную прокрутку при нажатии на стрелочки и там были бы другие блоки которые можно добавлять самому с какой то информациейЯ...

106