Подскажите как правильно переписать часть кода с Jquery на JS по ES6?

Question

Всем привет, подскажите пожалуйста как правильно переписать часть кода с Jquery на JS по ES6?

вот участок с которым возникла сложность. Буду рад совету по остальному коду если вдруг там что не так

$("<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();
});

Скрипт в песочнице

jsfiddle

дополнительно дублирую JS сюда

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")
}

Answer 1

Вместо insertAfter можно воспользоваться методом insertAdjacentHTML указав в качестве первого параметра значение afterend.

Вместо склейки строк, можно воспользоваться Шаблонными строками

`<span class="pip">
    <img class="imageThumb" src="${e.target.result}" title="${file.name"/>"
    <br/><span class="remove">Remove image</span>
</span>`

Вместо метода parent можно использовать parentElement

В итоге код может принять вид:

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();
    });

Метод nextElementSibling возвращает HTMLElement следующий непосредственно за текущим.

Answer 2

Попробую так. Здесь parent.pip каждый второй. Событие для любого .remove. Удаление любого родителя, включая и тех, которые не имеют класс .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();
    }));

По последнему подправлю. Parent() в jQuery позволяет сделать выборку по селектору, в данном случае по классу pip:

document.querySelectorAll(".remove").forEach(el => el.addEventListener('click', function(){
    if(this.parentElement.classList.contains('pip')) this.parentElement.remove();
}));

БЛОГ НА HUSL

Подскажите как правильно переписать часть кода с Jquery на JS по ES6?

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