使用javascript函数获取html控件值

Question

I have this table in my page that I fetch by using AJAX request.

<table>
    <tbody>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Example Name 1</td>
            <td class="text-center">
                <div class="btn-group" role="group" aria-label="">
                    <a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="2">
                        Delete
                    </a>
                </div>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Example Name 2</td>
            <td class="text-center">
                <div class="btn-group" role="group" aria-label="">
                    <a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="1">
                        Delete
                    </a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

So I'm trying to get the anchor value when the button is clicked. So I make a function like this :

function deleteParticipantFunction(){
    var result = confirm('You are about to delete this participant. Continue?');
    if(result){
        var participant_id = $(this).val();
        console.log(participant_id);
    }
};

But I'm not able to get the value. What is the correct way to fetch the value in the function?

Answer 1

Pass id direct to method:

<a href="javascript:;" onclick="deleteParticipantFunction(1)" class="delete-participant">

Then Yours js methods will be simpler:

function deleteParticipantFunction(participant_id){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
    //delete smth by id
}
};