Al hacer clic con el botón derecho en cada imagen, se eliminará la imagen y se creará un nuevo elemento al hacer clic en el botón +.
Pero el problema es que los nuevos elementos que se crean (se agregan) no se pueden eliminar. ¿Por qué es este el caso?
$(document).ready(function() { let nextItem = 4; $(".items div").click(function() { $(this).remove(); }); $(".btn").click(function() { $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`); nextItem++; }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="items"> <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div> <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div> <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div> </div> <button class="btn">+</button> </div>Porque esos no son el objetivo del controlador de eventos. No actualiza automáticamente los elementos que coinciden con el selector de consulta, es lo mismo que si hubiera usado addEventHandler : se ejecuta una vez. (vea a continuación donde no registran un mensaje en la consola, pero los codificados sí lo hacen).
$(document).ready(function() { let nextItem = 4; $(".items div").click(function() { console.log("Event processed"); }); $(".btn").click(function() { $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`); nextItem++; }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="items"> <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div> <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div> <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div> </div> <button class="btn">+</button> </div> En cambio, lo que haría es definir esa eliminación como una función y volver a agregarla al nuevo elemento usando la id :
$(document).ready(function() { let nextItem = 4; function removeItem() { $(this).remove(); } $(".items div").click(removeItem); $(".btn").click(function() { $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`); $(`#${nextItem}`).click(removeItem); nextItem++; }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="items"> <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div> <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div> <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div> </div> <button class="btn">+</button> </div>Debe usar eventos en vivo https://api.jquery.com/live/ ya que está creando un nuevo elemento Dom y no adjuntando el evento de clic nuevamente
$(".items div").live('click',function() { $(this).remove(); });Prueba esto
$(document).ready(function() { let nextItem = 4; $(".items div").click(function() { $(this).remove(); }); $(".btn").click(function() { $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`); nextItem++; }) $(`div#${nextItem}`).on('click',function(){ $(this).remove(); }) });