I have a page with many articles. Each article has a delete button. How can I identify the button clicked for the article?

Currently I have this:

<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>

$('#delete-article').on('click', function(e) {
    console.log('Test delete article');
});

This logs 'Test delete article' according to the number of articles on the page.

I have a page with many articles. Each article has a delete button. How can I identify the button clicked for the article?

Currently I have this:

<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>

$('#delete-article').on('click', function(e) {
    console.log('Test delete article');
});

This logs 'Test delete article' according to the number of articles on the page.

• javascript

• you can provide a different data attribute to each html button and then in onClick you can get the data attribute for which button is clicked, in the event. Read about data-attribute. – shubham-gupta Commented Oct 24, 2019 at 11:24

6 Answers 6

You can attach the event on button and use this object to refer the currently clicked button:

$('button').on('click', function(e) {
    console.log(this.id);
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
<button type="button" id="delete-article-2" class="btn btn-small btn-danger">Delete</button>

You can use your event variable to get the target of the event (that is, the element responsible) and from there get its id, like this:

let btnId = event.target.id;

However, for that to work properly you should assign unique ids to your buttons. If you want to provide other data (or you don't want to use id) you can append custom attributes, like data-value or similar, and use it like this:

let myValue = event.target.getAttribute('data-value');

You need to establish relation between article and corresponding button, one way to implement is by using HTML5 data attribute. assign data-articleId to article id in button element and when you click the button you can access which button was clicked by using Jquery .data() function.

<button type="button" data-articleId='123' class="btn btn-small btn-danger delete-article">Delete</button>

$('.delete-article').on('click', function(e) {
    $(this).data('articleId'); //will return 123;
    console.log('Test delete article');
});

If all the buttons have this markup

<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>

Then the DOM sees them as just one button, you should find a way to attach unique ids to your buttons

You can get an object of clicked button then you can get any details from that object like an index or whatever you want.

$('#delete-article').click(function(){
    console.log($(this));
    console.log($(this).index());
});

You can directly achieve it by using the JavaScript.

document.addEventListener('click',(e)=>{
  console.log(e.target.id)
})

<button type="button" id="delete-article1" class="btn btn-small btn-danger">Delete1</button>
<button type="button" id="delete-article2" class="btn btn-small btn-danger">Delete2</button>
<button type="button" id="delete-article3" class="btn btn-small btn-danger">Delete3</button>
<button type="button" id="delete-article4" class="btn btn-small btn-danger">Delete4</button>
<button type="button" id="delete-article5" class="btn btn-small btn-danger">Delete5</button>
<button type="button" id="delete-article6" class="btn btn-small btn-danger">Delete6</button>
<button type="button" id="delete-article7" class="btn btn-small btn-danger">Delete7</button>