remove() problems

remove() problems

I want to remove a specific box when i click on the remove button in that box.
I have a lot of boxes on a page but when i click on the remove btn it removes all the boxes. I just want to remove the box where i click on the delete btn.


This is the js code:
       $(".del").click(function() {
   
           $('div.floating-box').remove();

      
      });


Html code:
      <div class="floating-box">
            <div class="box-780-head">
                <h3>Box 1</h3>
                <a href="#" class="toggle"><img src="images/icons/toggle-plus.jpg" alt=""/></a>
                <a href="#"><img src="images/icons/delete.jpg" class="del" alt=""/></a>
            </div>
            <div class="box-780-body">lorem......</div>
        </div>


      <div class="floating-box">
            <div class="box-780-head">
                <h3>Box 2</h3>
                <a href="#" class="toggle"><img src="images/icons/toggle-plus.jpg" alt=""/></a>
                <a href="#"><img src="images/icons/delete.jpg" class="del" alt=""/></a>
            </div>
            <div class="box-780-body">lorem......</div>
        </div>


      <div class="floating-box">
            <div class="box-780-head">
                <h3>Box 3</h3>
                <a href="#" class="toggle"><img src="images/icons/toggle-plus.jpg" alt=""/></a>
                <a href="#"><img src="images/icons/delete.jpg" class="del" alt=""/></a>
            </div>
            <div class="box-780-body">lorem......</div>
        </div>

...............................
...............................
...............................


greetz