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  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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You know have an Array of the markers and you can remove them as needed. E.G.:

divMarks[2].remove();