Question

There is given code:

<div id="256">
   <p>SOMELEMENT</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<div id="257">
   <p>SOMELEMENT2</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<script>
   $(".edit").click(function() { var id = $(this).parent().attr("id"); /* do some Ajax here, edit element in database with given id*/});
   $(".delete").click(function() { var id = $(this).parent().attr("id"); /* do some Ajax here, delete element in database with given id*/});
</script>

There is a database with some elements, these elements have ID and I would like to do some actions on these elements via Ajax. I need database ID of element so that I can do some Ajax requests on this element. Solution above works, however there are some flaws – it is dependent from HTML structure (for example when I wrap button with some other element then parent() will not work because HTML structure changed).

How to store the better way database IDs of elements in HTML so JavaScript can get it for example for Ajax requests?

Answer 1

Why not do something like this using the data() method:

<div>
   <p>SOMELEMENT</p>
   <button class="edit" data-id="256">EDIT</button>
   <button class="delete" data-id="256">DELETE</button>
</div>
<div>
   <p>SOMELEMENT2</p>
   <button class="edit" data-id="257">EDIT</button>
   <button class="delete" data-id="257">DELETE</button>
</div>

Now that you have the data-id associated with your buttons, you can do:

$(".edit").click(function() { 
  var id = $(this).data("id"); 
  /* do some Ajax here, edit element in database with given id*/
});

EXAMPLE