remove image after view

HTML

<div class="image">
    <div class="container">
        <span id="timer"></span>
        <img id="remove-me" src="234234" title="Picture filled" width="500">
    </div>
</div>
<p>
    <a href="http://icons8.com/icons/#!/2808/picture-filled">Icon Picture Filled by Icons8</a></p>

CSS

.image { width: 100%; }
.image .container { width: 138px; height: 138px; background: #ccc; margin: auto; position: relative; }
.image .container img { padding-top: 5px; padding-left: 5px; }
a { font-family: Arial; font-size: 10pt; color: #888; }
a:hover { color: #00F; }
p { text-align: right; }
#timer { display: block; font-weight: bold; position: absolute; z-index: 1; top: 45%; left: 45%; font-family: Arial; font-size: 20pt; color: #fff; }

JavaScript

var destroyTimeSec = remainTimeSec = 7;

setTimeout(function(){
    $('#remove-me').remove();
    $('#timer').hide();
}, destroyTimeSec * 1000);

$('#timer').text(remainTimeSec);
setInterval(function(){
    $('#timer').text(--remainTimeSec);
}, 1000);