Tengo una función que cada vez que hago clic en canvas div con imagen se crea en ese lugar donde hice clic.
$(function () { $("#the-canvas").click(function (e) { x = e.pageX; y = e.pageY; var xMax = 2900; var yMax = 2900; var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />'); window.divMark = document.createElement("div"); divMark.classList = `markers mark`; $(divMark).css({ position: "absolute", left: x + "px", top: y + "px", }); $(divMark).append(img); $(marksCanvas).append(divMark); counter++; saveLocalPos(x); saveLocalY(y); var imgHeight = img.outerHeight(); if (y + imgHeight > yMax) { divMark.css("top", yMax - imgHeight); } var imgWidth = img.outerWidth(); if (x + imgWidth > xMax) { divMark.css("left", yMax - imgWidth); } });Esta es mi función de eliminación
deleteBtn.onclick = function (e) { divMark.remove(); };El problema de esta función es que cuando hago clic en el botón Eliminar, solo se elimina un div, pero luego vuelvo a hacer clic y no se eliminarán nuevamente.
Su código solo guarda una referencia al último divMark creado. Cada vez que crea uno nuevo, sobrescribe la ventana antigua. DivMark con la nueva. Cuando presiona el botón eliminar, accede a la última divMark creada, la elimina y en llamadas posteriores intenta eliminarla una y otra vez. En su lugar, debe crear una matriz y agregar un divMark a esa matriz cada vez que se crea una. Luego, cada vez que presiona el botón Eliminar, necesita obtener una marca divMark de la matriz, llamar a remove() y también eliminarla de la matriz
¿Tiene un botón para cada div o un botón que elimina todos los divs en Last In First Out?
// at the top of the files const divsList = []; const newId = (function () { let id = 0; return () => ++id; })(); // where you create the div const div = ... newdiv const currentId = newId(); div.setAttribute("id", newId()); divsList.push(currentId); // delete handler deleteBtn.onclick = function (e) { const currentId = divsList[divsList.length - 1]; if (currentId !== undefined) { document.getElementById(currentId).delete(); divsList.slice(0, -1); } };Considere el siguiente ejemplo.
$(function() { var divMarks = []; function addImage(props, event, target) { var divMark = $("<div>", { class: "markers mark" }); if (target !== undefined) { divMark.appendTo(target); } $("<img>", props).appendTo(divMark); divMark.css({ position: "absolute", top: (event.pageY - 10), left: (event.pageX - 10) }); return divMark; } $("#the-canvas").click(function(event) { divMarks.push(addImage({ class: "comment", src: "indeksiraj-1.png", alt: "Image" }, event, this)); }); }) #the-canvas { border: 1px solid black; width: 2900px; height: 2900px; } .markers { border: 1px solid red; width: 20px; height: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="the-canvas"> </div>Sabe que tiene una matriz de marcadores y puede eliminarlos según sea necesario. P.EJ:
divMarks[2].remove();