Как связать два элемента с помощью data-атрибутов?

271

22 августа 2021, 15:20

Имею два элемента:

<button class="btn_delete js-btnDelete active" data-id="delete"></button>

<button class="buy-it js-btnBasket" data-id="delete"></button>

При клике на один должен удалиться другой. Пытаюсь разобраться, как это сделать через data-атрибуты. Добавил обоим data-id="delete"

В jQ пишу:

 $('body').on('click', '.js-btnDelete', function() {
   $(this).attr('delete').removeClass('active');
 });

Но, не получаю то, что нужно. Помогите разораться. Благодарю!

Answer 1

Если я правильно понял фразу "При клике на один должен удалиться другой", то я бвы делал как-то так - убирал бы все с data = delete кроме нажатого

var buttons = document.querySelectorAll('button[data-id="delete"]');  
[].forEach.call(buttons, (e => e.onclick = function() { 
   me = this; 
   [].forEach.call(buttons, function(e) { 
       if(e !== me)  
           e.style.display = 'none' 
    }) 
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button class="btn_delete js-btnDelete active" data-id="delete">Жми чтобы удалить "Тест"</button> 
<button class="buy-it js-btnBasket" data-id="delete">Тест</button>

Answer 2

$(document).on('click', '.buy-it', function() { 
  $(`span[data-id="${$(this).attr('data-id')}"`).fadeOut(); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<button data-id="1" class="buy-it js-btnBasket">Тест 1</button> 
<button data-id="2" class="buy-it js-btnBasket">Тест 2</button> 
<button data-id="3" class="buy-it js-btnBasket">Тест 3</button> 
<button data-id="4" class="buy-it js-btnBasket">Тест 4</button> 
<hr> 
 
<span data-id="1">Тест 1</span> 
<span data-id="2">Тест 2</span> 
<span data-id="3">Тест 3</span> 
<span data-id="4">Тест 4</span>