Могу ли я получить позицию элемента div (созданного циклом из JavaScript) при нажатии кнопки внутри этого div?

Я хочу отправить значение из html в javascript, используя переменную javascript.

Я создал div из javascript следующим образом:

<body>
<div id = "row" class = "category-cards">
// creates from js
</div>
</body>

<script>

var d1 = document.getElementById("row");
for (let i=5; i>0; i--) {

d1.insertAdjacentHTML('beforeend', 
 <div class = "card card-small card-category">
 <div class = "card-del-btn">
 <button id = "btnDel" onclick = "deleteCategory(i)"> <b> × </b> </button>
 </div>
 <!-- displays the record --!>
 </div>
}

function deleteCategory(index){
// takes the index and searches the mysql database for match, and deletes the record
}
</script>

Каждая итерация цикла for вставляет карту записи из базы данных, и я хочу удалить эту запись из документа, а также из базы данных при нажатии кнопки.

Есть ли способ связать уникальный идентификатор или значение с каждой карточкой и отправить его по клику?

Я пытался отправить значение i, но это всегда последний индекс, который в данном случае был равен 0.

javascript html mysql web

25.11.2022 21:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Существует много способов добиться того, что вы ищете, но самым простым из них было бы использование пользовательских атрибутов html и предоставление элемента, который инициировал событие, в качестве аргумента для вашего обратного вызова.

Это может быть достигнуто так

function handleClick(element) {
const elementData = element.getAttribute('data-my-data')
// do some stuff here with element data
}

Используя ваш код:

d1.insertAdjacentHTML('beforeend', `
<div class = "card card-small card-category">
 <div class = "card-del-btn">
 <button data-my-data = "here goes your data" onclick = "handleClick(element)"> <b> × </b> </button>
 </div>
 </div>
`)

Это потрясающе, большое спасибо. Тем не менее, мне пришлось передать «это» в качестве аргумента вместо «элемент» в вызове handleClick, поэтому, пожалуйста, отредактируйте это в элементе <button>.

— 26.11.2022 08:27

В этом случае this будет объектом Window. Не сработает. element - это просто название для аргумента, можно назвать как угодно :)

— 26.11.2022 18:22

26.11.2022 01:04