<!-- CSS -->
<style type="text/css">
body {
    margin: 10px auto;
    width: 470px;
}
h3 {
    margin: 0;
    padding: 0 0 .3em;
}
p {
    margin: 0;
    padding: 0 0 .5em;
}
.pane {
    background: #edf5e1;
    padding: 10px 20px 10px;
    position: relative;
    border-top: solid 2px #c4df9b;
}
.pane .delete {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
</style>



<!-- Body -->
<div class="pane">
    <h3>Sample heading 1</h3>
    <p>內容</p>
    <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
    <h3>Sample heading 2</h3>
    <p>內容</p>
    <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
    <h3>Sample heading 3</h3>
    <p>內容</p>
    <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
    <h3>Sample heading 4</h3>
    <p>內容</p>
    <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
    <h3>Sample heading 5</h3>
    <p>內容</p>
    <img src="/public/images/jquery/btn-delete.gif" alt="delete" class="delete" />
</div>



<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function(){
                           
    $(".pane .delete").click(function(){
        $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
    });

});
</script>