I want to display a message before an activity is deleted from the list.

I have a list of different activities.
There are two buttons for each activity.
When the user presses one of these, the activity is deleted from the list (in fact, it is added to another database table instead).
Now I want this to be clarified with a message before the activity is deleted.
I want to use Bootstrap's alert component (https://getbootstrap.com/docs/4.0/components/alerts/).
But its not working. I have tried to create a javascript that will be activated when the buttons are pressed. But its not working. The activity is deleted, but no message before.

Here is the code:
<button name="doneBucketSV" type="submit" class="btn btn-sm btn-outline-success btn-block rounded-0" style="width: 49%; float: left; margin-top: 0;" id="doneBucketSV" onclick="doneBucketFunction">Avklarad</button>
<div id="doneBucketSvAlert" class="alert alert-dark collapse">
<a id="doneBucketSvAlertLinkClose" href="#" class="close">&times;</a>
Aktiviteten har överförts till din bucketlista, och har markerats som avklarad!
</div>

<script src="https://ajax.googleapsis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#doneBucketSV').click(function () {
$('#doneBucketSvAlert').show('fade');

setTimeout(function () {
$('#doneBucketSvAlert').hide('fade');
}, 2000);
});

$('#doneBucketSvAlertLinkClose').click(function () {
$('#doneBucketSvAlert').hide('fade');
});
});
</script>
<script>
function doneBucketFunction() {
document.getElementById("doneBucketSV").style.display='none';
}
</script>

Try changing your button to type="button" instead of type="submit"

A type submit button will automatically submit the form, so your message won't have a chance to show.

Unfortunately, does this mean that the button cannot be used.

The button should pop up a window that asks them to confirm.

Inside of the confirm div add the same button with type="submit" to actually submit the form and perform the action.

I want a message that appears when the user presses the button. This message should tell the user that the activity has been moved to another location. If the user does not press the close button for the message within three seconds - it closes automatically. The Bootstraps Alert function works this way. But it seems that the script is not activated. I do not know if it has to do with the button & activity disappearing directly from DOM, after pressing the button - or what? If so, can you change this so that the message first appears and then the activity disappears?

I see. In that case you should use a hidden iframe or ajax to submit the form and delete the record so you can display the message without the page reloading.

Is this the only solution. It sounds complicated. The only thing I want - is that a notice should be displayed before the onclick = "addBucketFunction ()" function comes in?

I'm sure there are a lot of ways it could be done. I don't think there are any that would be much less complicated. You could maybe use a setTimeout() call to delay the form submit to give the message time to display.