如何在JavaScript中出现模态后显示吐司消息？

Question

我有一个带有删除按钮的数据表，单击该按钮可通过模式显示确认消息。当用户确认删除后，条目将被删除，并且用户将被引导回到数据表。我想在模式消失后通过烤面包机/小吃栏显示成功的删除消息，我尝试在JavaScript中使用setTimeout函数，但是烤面包机在模式消失的同时消失了。请帮助菜鸟。谢谢！

这是我的前端代码：

  <button class="btn-trash" data-toggle="modal" data-target="#delete-modal{{a.id}}"><i class="far fa-trash-alt"></i></button>
  <div class="modal fade" id="delete-modal{{a.id}}" role="dialog" aria-labelledby="delete-modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
      <div class="modal-content">
        <div class="modal-body">
          <h3><strong>Delete item?</strong></h3>
          <br><p>Deleting an item cannot be undone and you will be unable to recover any data.</p>
        </div>
        <div class="modal-footer ml-auto">
          <button class="btn-no" data-dismiss="modal">Cancel</button>
          <form action="{% url 'delete_entry' a.pk %}" method="POST">
            {% csrf_token %}
            <button class="btn btn-yes" type="submit" id="deleted">Delete</button>
          </form> 
        </div>
      </div>
    </div>
  </div>

  <div id="toast">
    <span>Data and all its associated files are permanently deleted.</span>
  </div> 

 <script>
    document.getElementById('deleted').onsubmit(function() {
      var x = document.getElementById('toast');
      x.className = "show";
      setTimeout(function() {
        x.className = x.className.replace("show", "");
      }, 2000);
    });
  </script>