How do I make a HTML/CSS element disappear after it has been through the JavaScript animation?

I have this animation where a box moves from one part of the page to another with the click of a start button.

How would I get the box to disappear from the page after the animation is completed?

<div id="box">
        <p> BOX </p>
    </div>
<div id="box">
        <p> Box </p>
    </div>

    <style type='text/css'>
    #box {
      width: 100px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      left: 0px;
      top: 300px;
      text-align: center;
      font-family: Times New Roman;
    }
  </style>

<button>Start</button> 

<script>
$(function() {
        $("button").click(function() {
            $("#box").animate({
                left: $(window).width() - 800
                 });
            });
        });
</script>