ajax form post works on first action, second action reloads page

Question

I have a page with a list box that gets it data from mysql. The list box allows the user to delete a item. I want to load the results of the deletemanagement.php in a div without reloading the main page. I also want to reload the list box so the delete item is not there anymore and finally the user should be able to delete another item from the (updated) list box.

So far I managed to have the list box delete records from my database, load the php into a div and update the list box (by reloading the div). However when I try to delete a second item, the page fully reloads and and does not delete the selected item. After clicking submit again it works and the div is updated again.

Why is the page reloading when trying to delete a second item and how can I prevent that?

    <div id="deleteMangement">
     <form id="test">
        <h2>Delete management:</h2>
        <p>
          <label for="deleteMangementSelect">Select from list:</label>
          <br>
          <select id="deleteMangementSelect" name="deleteMangementSelect" required>
            <option value="">Select</option>
            <?php
              $i=0;
              while($row = mysqli_fetch_array($result)) {
            ?>
              <option value="<?=$row["management"];?>"><?=$row["management"];?></option>
            <?php
              $i++;
              }
            ?>
          </select>
        </p>
        <p>
          <input type="submit" value="Delete">
        </p>
      </form>
    </div>
   <div id="output">
   </div>
<script>
$("#test").submit(function(event){
  event.preventDefault();
  $.post( "deleteManagement.php", $("#test").serialize(), function(data){
    $("#output").html(data);
    $("#deleteMangement").load(location.href + " #deleteMangement");
  });
});
</script>