Wordpress post edit page reloads on JS button click in custom metabox

Question

I have a custom metabox for all edit-post webpages. This metabox contains table with each row containing an image tag and a edit and delete button to delete that image or update it from media library. Now,

When I click the Delete button, the js code that runs is :

jQuery('#delete_image').on('click',function(){
$(this).closest('tr').remove();
});

But, when I click the delete button in metabox, the page reloads , instead of deleting the row. Please help on how to approach this.

Also tried :

• event.preventDefault() but no change in behaviour.
  
• Disabling all plugins (i'm using chrome)

Answer 1

maybe an event is already on this element try with .off to delete other listener and return false to stop propagation.

jQuery('#delete_image').off().on('click',function(){
    $(this).closest('tr').remove();
    return false
});