求解答？？怎么二次清除通过input添加显示的img图片

本来是想通过点击事件，把原来input的file添加过的内容进行清空，但是在清空后再添加，图片就不显示出来了，用了绑定事件和移除事件，但是发现还是没有效果，求解答？

？

html代码：

<div id="img-box">
    <img src="" alt="" id="img">
    <input type="file" name="file" id="img-select">
</div>

<button id="button" style="margin-top:30px;">点击我</button>

css代码：

#img{
    width: 200px;
    height: 200px;
    border:1px solid red;
    float: left;
}

js代码：

<script src="jquery-1.8.0.js"></script>
<script src="ajaxfileupload.js"></script>
<script>


    //这是input
    $('#img-box #img-select').change(function () {
        if (typeof FileReader == 'undefined') {
            alert("检测到您的浏览器不支持FileReader对象！");
        }
        var reader = new FileReader(),
        val = this.files[0];
        reader.readAsDataURL(val);
        reader.onload = function () {
            $('#img').attr('src', reader.result);
        };
//           $("#button").removeEventListener("click",handle,false)
    });

// 这里不知道在哪地方添加绑定和移除监听事件？？？
    $("#button").click(function () {        $("#img-box").html('<img src="" alt="" id="img">' + '<input type=\"file\" id=\"file\" name=\"file\" multiple style=\"width: 300px\"/>')    });</script>