Как удалить картинку при клике на кнопку?

Question

Разбираюсь с удалением элементов на js. Вопрос: где я совершаю ошибку?

Что не так в этой записи:

files.onclick = function(event) {
    let target = event.target.closest('.picture');

    target.remove();
};

Полный код:

    function selectPicture(e) {
        document.querySelector(".bigsize").style.display = "none";

        var files = e.target.files;

        for (var i = 0, f; f = files[i]; i++) {

            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            reader.onload = (function (theFile) {

                if (files[i].size > 5242880 ) {
                    document.querySelector(".bigsize").style.display = "block";
                } else {

                    return function (e) {
                        document.querySelector(".none").style.display = "none";

                        var span = document.createElement('span');

                        span.innerHTML = ['<img class="picture" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>' +
                            '<button type="button" class="btn_remove" id="js-btnRemove" aria-label="Удалить"></button>'].join('');

                        files.onclick = function(event) {
                            let target = event.target.closest('.picture');

                            target.remove();
                        };

                        document.getElementById('list').insertBefore(span, null);
                    };
                };
            })(f);

            reader.readAsDataURL(f);
        }
    };

    document.getElementById('files').addEventListener('change', selectPicture, false);


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Files</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<svg style="display: none;">
  <symbol id="file" viewBox="0 0 18 14">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="14"
         viewBox="0 0 18 14">
      <defs>
        <path id="eqkwa"
              d="M805 1031v10a1 1 0 0 1-1 1h-2.016v-.002A1 1 0 0 1 802 1040h.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-3.329l-.585-.586-1.415-1.414h-2.343l-1.414 1.414-.586.586H789.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h.5a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h4l1.707-1.707a1 1 0 0 1 .707-.293h3.172a1 1 0 0 1 .707.293L800 1030h4a1 1 0 0 1 1 1zm-9 4c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2c0 0 1.103 0 0 0zm0-2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z">
        </path>
      </defs>
      <g>
        <g transform="translate(-787 -1028)">
          <use fill="#939499" xlink:href="#eqkwa"></use>
        </g>
      </g>
    </svg>
  </symbol>
</svg>

<div class="content">
  <label class="file">
    <svg width="18" height="14">
      <use xlink:href="#file"></use>
    </svg>

    <span>Загрузить фото</span>

    <input type="file" id="files" name="files[]" multiple />
  </label>

  <div class="bigsize">Размер фото не должен превышать 5мб!</div>

  <div class="files" id="list">
    <!--  look js-file  -->
    <div class="none">Фото нет</div>
  </div>
</div>

<script src="script.js"></script>

</body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.file input {
 display: none;
}

.content {
 max-width: 1200px;
 margin: 0 auto;
 text-align: center;
 padding: 50px 0;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

.file {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 140px;
 padding: 20px 0;
 border: 1px solid #bfbfbf;
 font-weight: bold;
 transition: border 0.15s;
 cursor: pointer;
}

.file:hover {
 border: 1px solid #000;
 transition: border 0.15s;
}

.file span {
 font-size: 14px;
 color: gray;
 margin-top: 10px;
}

.files {
 display: flex;
 flex-wrap: wrap;
 margin-top: 50px;
 width: 100%;
}

.none {
 text-align: center;
 width: 100%;
}

.picture {
 width: 290px;
 margin: 10px 5px 0 0;
}

.picture:hover { cursor: pointer; }

.bigsize { display: none; }

Answer 1

Ну вот например на jquery: 
$('.picture').on("click", function(){
    $(".picture").css("display", "none");
});

Answer 2

Если необходимо удалить элемент:

    but.onclick = function () {
        var elem = document.getElementById('main');
        elem.innerHTML = "";
    }

<div id="main">
    <div>123123</div>
</div>
<button id="but">Тык</button>

Если необходимо скрыть элемент:

    but.onclick = function () {
        var elem = document.getElementById('div');
        elem.style.display = "none";
    }

<div id="main">
    <div id="div">123123</div>
</div>
<button id="but">Тык</button>

БЛОГ НА HUSL

Как удалить картинку при клике на кнопку?

Ответы (2 шт):