2033
Member
- Joined
- May 11, 2025
- Messages
- 18
- Programming Experience
- 1-3
I have a table of data with a pretty basic delete button in the last table row. I want this button to contain a specific ID for an entity in the same row where the button is.
The problem is in the JavaScript. As you can see, I'm using a CSS class in order to produce a click event. Also, I'm using Bootbox for confirm action. After that I need to receive an ID of the element, but if I use the same class name (.deleteWord) it's going to take an ID of the first button in a table. So I need to use this keyword. And it works without the Bootbox, so I need to use this keyword, but not for the Bootbox. I need to go up one level in order for this keyword to refer to the button. How can I do this?
HTML:
<button data-id="@word.Id" class="deleteWord">
Delete
</button>
The problem is in the JavaScript. As you can see, I'm using a CSS class in order to produce a click event. Also, I'm using Bootbox for confirm action. After that I need to receive an ID of the element, but if I use the same class name (.deleteWord) it's going to take an ID of the first button in a table. So I need to use this keyword. And it works without the Bootbox, so I need to use this keyword, but not for the Bootbox. I need to go up one level in order for this keyword to refer to the button. How can I do this?
JavaScript for deleting a row in a table.:
$(".deleteWord").on("click", function () {
bootbox.confirm("Do you really wanna delete this word?", function(result) {
if(result){
var id = $(this).data("id");
$.ajax({
url: '@Url.Action("DeleteWord", "Home")',
type: "POST",
data: { id: id },
success: function(res) {
count -= 1;
$("#numWords").text(count);
$("#word").text(count === 1 ? "word" : "words");
toastr.success("The word has been successfully deleted");
$("#tableRow-" + id).css('background','tomato');
$("#tableRow-" + id).fadeOut(800, function(){
$(this).remove();
});
$("#BtnStudy").prop("disabled", count === 0);
$("#BtnStudyFav").prop("disabled", countFav === 0);
}
});
}
});
});