Tell me how to correctly rewrite part of the code from Jquery to JS by ES6?
Hello everyone, please tell me how to correctly rewrite part of the code from Jquery to JS by ES6?
Here is the site with which there was a difficulty. I will be glad to advise on the rest of the code if there is something wrong
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\">Remove image</span>" +
"</span>").insertAfter("#photos");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});Sandbox script
Additionally, I duplicate JS here
if (window.File && window.FileList && window.FileReader) {
document.getElementById('photos').addEventListener('change', function (e) {
let photos = e.target.files,
photosLength = photos.length;
for (let i = 0; i < photosLength; i++) {
let f = photos[i];
let fileReader = new FileReader();
fileReader.onload = (function(e) {
let file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\">Remove image</span>" +
"</span>").insertAfter("#photos");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}2 answers
Instead of insertAfter you can use the method insertAdjacentHTML specifying the value afterend as the first parameter.
Instead of gluing strings, you can use Template strings
`<span class="pip">
<img class="imageThumb" src="${e.target.result}" title="${file.name"/>"
<br/><span class="remove">Remove image</span>
</span>`
Instead of a method parent you can use parentElement
As a result, the code can take the form:
document.getElementById('photos').insertAdjacentHTML('afterend',
`<span class="pip">
<img class="imageThumb" src="${e.target.result}" title="${file.name}"/>"
<br/><span class="remove">Remove image</span>
</span>`
);
// document.querySelectorAll(".remove") // в этой строке выбираются все элементы с классом `remove` на странице, даже те, которым уже добавлен обработчик.
// .forEach(el => el.addEventListener('click', function(){
// чтобы не добавлять повторно, можно искать элемент `remove` только внутри только что добавленного элемента, который идет сразу после элемента `#photos`,
// этот элемент можно получить с помощью метода, nextElementSibling
document.getElementById('photos')
.nextElementSibling
.querySelector('.remove')
.addEventListener('click', function(){
this.parentElement.remove();
});
Method nextElementSibling returns the HTMLElement immediately following the current one.
I'll try this. Here, parent.pip is every second. Event for any. remove. Deleting any parent, including those that do not have a class. pip
<div class="pip"><p class="remove">Some text</p></div>
<div><p class="remove">Some text</p></div>
<div class="pip"><p class="remove">Some text</p></div>
<div><p class="remove">Some text</p></div>
<div class="pip"><p class="remove">Some text</p></div>
<div><p class="remove">Some text</p></div>
document.querySelectorAll(".pip .remove").forEach(el => el.addEventListener('click', function(){
this.parentElement.remove();
}));
By the last touch-up. Parent() in jQuery allows you to make a selection by a selector, in this case by the pip class:
document.querySelectorAll(".remove").forEach(el => el.addEventListener('click', function(){
if(this.parentElement.classList.contains('pip')) this.parentElement.remove();
}));