Как добавить кнопку закрытия или очистить код в Javascript?

Question

У меня есть галерея изображений (динамически извлекается из json). Когда я открываю ссылку, картинка выскакивает, но я не могу ее закрыть.

Мне нужно было бы добавить какую-нибудь кнопку «Закрыть» или просто очистить код (событие onclick?).

createImg.setAttribute("src", books[i].cover)
createImg.setAttribute("alt", "Avatar")
createImg.setAttribute("style", "width:290px;height:380px;")

 var createButton = document.createElement("button");
createButton.setAttribute("type", "button");
createButton.setAttribute("id", books[i].detail);
createButton.addEventListener("click", function (event) {
  var showPicture = document.getElementById("showPictureID")

// - clean code or close button (on click ??)

  var createDet = document.createElement('img');
     createDet.setAttribute("src", event.target.id)
  createDet.setAttribute("alt", "image")
  createDet.setAttribute("style", "position:fixed;top:20%;left:20%;")

  var showPicture = document.getElementById("showPictureID")
  showPicture.appendChild(createDet);

Не знаю, как к этому подойти. Это длинный код, таким образом, я вставляю только часть этого ... Мы получаем

Любые идеи очень ценятся.

Answer 1

Непосредственно перед созданием элемента img «createDet» вы можете создать элемент кнопки для удаления

var closeBtn = document.createElement('button');
closeBtn.innerHTML = "Close image";
showPicture.appendChild(closeBtn);

closeBtn.addEventListener ("click", function() {
    var showPicture = document.getElementById("showPictureID");
    var imgTag = showPicture.getElementsByTagName('img')[0]; //or use more precise selection for image that must be closed
    showPicture.removeChild(imgTag);

    var btnTag = showPicture.getElementsByTagName('button')[0]; //remove the close button too
    showPicture.removeChild(btnTag);
});

Стиль кнопки с css, как вы sh.

Если showPicture содержит только изображение, вы можете просто очистить его, но вы должны использовать только один из слушателей событий, а не оба.

closeBtn.addEventListener ("click", function() {
    var showPicture = document.getElementById("showPictureID");
    showPicture.innerHTML = '';
});