<div class="body">
  <h3>Data attribute Kullanımı | data-id & data-field</h3>
  
 1-)<input type="text" data-id="1453" placeholder="İnput elementi"/><button id="inputButon">İnput Değeri Al</button>
  <br>
<div data-field="1071">2-) Div Elementi<button id="divButon">Div Değeri Al</button></div>
3-)<a href="" data-id="1923">A href Elementi</a><button id="hrefButon">A href Değeri Al</button><br>
  <button id="dataSil">SİL DATA-ID</button>
</div>
.body {
  background-color:#e3f7ff;
  font-size:19px;
  line-height:40px;
};
$("#inputButon").on("click", function(){
  var dataInputDegeri=$("input").attr("data-id");
    alert("Data-id= "+ dataInputDegeri);
});
$("#divButon").on("click", function(){
  var dataDivDegeri=$(".body div").attr("data-field");
    alert("Data-field= "+ dataDivDegeri);
});
$("#hrefButon").on("click", function(){
  var dataHrefDegeri=$("a").attr("data-id");
    alert("Data-id= "+ dataHrefDegeri);
});
$("#dataSil").on("click", function(){
$('[data-id]').remove(); // yada Tekli Silme için $('[data-id="1923"]').remove();
$('[data-field]').remove(); //$('[data-field="1071"]').remove();
});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js