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

181

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