<div class="block1 block">
<p class="text">1</p>
<img src="https://avatars.mds.yandex.net/i?id=dc7361b95e9b0527c543cbb558a72055_l-5878560-images-thumbs&n=27&h=384&w=480" alt="" class="img">
<button class="button">click</button>
</div>
<div class="block2 block">
<p class="text">2</p>
<img src="https://avatarko.ru/img/kartinka/1/Crazy_Frog.jpg" alt="" class="img">
<button class="button">click</button>
</div>
<div class="output"></div>
img {
width: 75px;
}
const output = document.querySelector(".output");
document.addEventListener("click", (e) => {
if (e.target.classList.contains("button")) {
const block = e.target.closest(".block").cloneNode(true);
block.querySelector("button").remove();
output.innerHTML = block.outerHTML;
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.