Can I get the position of the div element (created by a loop from JavaScript) on a button click insi-CodePudding

I want to send a value from html to javascript using javascript variable.

I've created a div from javascript like this:

<body>
<div id="row" >
// creates from js
</div>
</body>

<script>

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

d1.insertAdjacentHTML('beforeend', 
 <div >
 <div >
 <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>

Each iteration of the for loop inserts a card of a record from the database, and I wish to delete that record from the document, as well as the database, when the button is clicked.

Is there a way to associate a unique id or value to each card and send it through the onclick?

I have tried sending the value of i but it is always the last index, which in this case was 0.

CodePudding user response：

There many ways to achieve what you looking for but simplest one would be to use custom html attributes and provide element that triggered event as argument to your callback.

This could be achieved like this

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

Using your code:

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