在这个解决方案中,我只是从PC上传图像。 您可以在JavaScript代码的最后3行中看到,当单击关闭按钮时,我想删除每个图像。 问题是这不起作用:我正在做的是不显示父div,即图像,当关闭按钮时,它的子div被按下。 问题可能是什么?
null
let inputFile = document.getElementById("addImg1");
let rowOfPhotos = document.getElementById("row-of-product-photos");
inputFile.addEventListener("change", function (e) {
let files = e.target.files;
let output = rowOfPhotos;
for (let i = 0; i < files.length; i++) {
let file = files[i];
if (file) {
const reader = new FileReader();
reader.addEventListener("load", function (e) {
console.log(this);
let imageFile = e.target;
let divDocument = document.createElement("div");
let divDocumentClose = document.createElement("div");
let image = document.createElement("img");
divDocument.setAttribute("class", "id-document");
divDocumentClose.setAttribute("class", "id-document-close");
image.setAttribute("class", "image-preview");
image.setAttribute("style", "width: inherit; height: inherit; border-radius: 20px;");
image.setAttribute("src", imageFile.result);
divDocument.appendChild(divDocumentClose);
divDocument.appendChild(image);
rowOfPhotos.appendChild(divDocument);
});
reader.readAsDataURL(file);
} else {
image.style.display = null;
}
}
});
document.querySelectorAll(".id-document-close").forEach(item => {
item.addEventListener("click", e => {
this.parentElement.style.display = "none";
});
});
.id-document{
width: 90px;
height: 90px;
background: url(webimage/mario.jpg) no-repeat center center;
background-size: cover;
box-sizing: border-box;
border-radius: 20px;
position: relative;
display: inline-block;
cursor: pointer;
margin-right: 3%;
}
.id-document-close{
height: 25px;
width: 25px;
position: absolute;
right: -8px;
top: -6px;
border-radius: 100px;
background: url(icons/close-white.svg) no-repeat center center;
background-size: 11px;
background-color: #282b2e;
cursor: pointer;
}
<div class="verification-main-input-div">
<p class="verification-main-text">Add a photo with your item (optional)</p>
<div id="row-of-product-photos" class="row-of-id-photos">
<div class="two1" id="addImgLabel1">
<label for="addImg1" class="input-label inputLabelCss">
<div class="photosvg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-camera camera-icon">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
<circle cx="12" cy="13" r="4"></circle>
</svg>
</div>
</label> <!-- ngIf: images.length<maxImagesForProduct -->
<input id="addImg1" type="file" accept=".png, .jpg, .jpeg" style="display:none" multiple="">
</div>
</div>
</div>
null
您将在创建关闭div之前附加事件侦听器。 相反,在创建每个元素时添加事件侦听器。
divDocumentClose.addEventListener("click", e => {
divDocument.style.display = "none";
});
演示:
null
let inputFile = document.getElementById("addImg1");
let rowOfPhotos = document.getElementById("row-of-product-photos");
inputFile.addEventListener("change", function (e) {
let files = e.target.files;
let output = rowOfPhotos;
for (let i = 0; i < files.length; i++) {
let file = files[i];
if (file) {
const reader = new FileReader();
reader.addEventListener("load", function (e) {
let imageFile = e.target;
let divDocument = document.createElement("div");
let divDocumentClose = document.createElement("div");
let image = document.createElement("img");
divDocument.setAttribute("class", "id-document");
divDocumentClose.setAttribute("class", "id-document-close");
image.setAttribute("class", "image-preview");
image.setAttribute("style", "width: inherit; height: inherit; border-radius: 20px;");
image.setAttribute("src", imageFile.result);
divDocument.appendChild(divDocumentClose);
divDocument.appendChild(image);
divDocumentClose.addEventListener("click", e => {
divDocument.style.display = "none";
});
rowOfPhotos.appendChild(divDocument);
});
reader.readAsDataURL(file);
} else {
image.style.display = null;
}
}
});
document.querySelectorAll(".id-document-close").forEach(item => {
item.addEventListener("click", e => {
this.parentElement.style.display = "none";
});
});
.id-document{
width: 90px;
height: 90px;
background: url(webimage/mario.jpg) no-repeat center center;
background-size: cover;
box-sizing: border-box;
border-radius: 20px;
position: relative;
display: inline-block;
cursor: pointer;
margin-right: 3%;
}
.id-document-close{
height: 25px;
width: 25px;
position: absolute;
right: -8px;
top: -6px;
border-radius: 100px;
background: url(icons/close-white.svg) no-repeat center center;
background-size: 11px;
background-color: #282b2e;
cursor: pointer;
}
<div class="verification-main-input-div">
<p class="verification-main-text">Add a photo with your item (optional)</p>
<div id="row-of-product-photos" class="row-of-id-photos">
<div class="two1" id="addImgLabel1">
<label for="addImg1" class="input-label inputLabelCss">
<div class="photosvg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-camera camera-icon">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
<circle cx="12" cy="13" r="4"></circle>
</svg>
</div>
</label> <!-- ngIf: images.length<maxImagesForProduct -->
<input id="addImg1" type="file" accept=".png, .jpg, .jpeg" style="display:none" multiple="">
</div>
</div>
</div>