I have function that every time when I click on canvas div with image get created on that place where I clicked.
$(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);
}
});
This is my delete function
deleteBtn.onclick = function (e) {
divMark.remove();
};
The problem of this function is that when I click on delete button it delete just one div but then I click again it those don't won't delete again.
Your code is only saving a reference to the last created divMark. Each time you create a new one, it overwrites the old window.DivMark with the new one. When you press the delete button, it accesses the last created divMark, removed it and on subsequent calls it tries to remove it again and again l. Instead, you need to create an array and add a divMark to that array each time one is created. Then each time you press the delete button you need to get a divMark from the array, call the remove() and also remove it from the array
Do you have one button for each div or one button that deletes all the divs in a 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);
}
};
Consider the following example.
$(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>You know have an Array of the markers and you can remove them as needed. E.G.:
divMarks[2].remove();