BUG: Delete & Scale icons do not hide when deleting User art.

[NullOperator404]

This one is a real head scratcher for me. A selected element in the design space includes handle icons for scaling the element up/down, or removing the element. The HTML for these two icons is contained within the <div> that contains the <img>, and the delete command hides the bounding box (and thus all of it's contents). For text and art elements, these icons would hide along with the viewbox, but for some reason, they do not hide with user art. Everything else hides - the user image and it's box, but not the icons. So I setup additional code in an attempt to force JS to hide the icons:

function deleteElement() {
    document.getElementById(scale).style.visibility = "hidden";
    document.getElementById(del).style.visibility = "hidden";
    document.getElementById(viewBox).style.visibility = "hidden";
}

However, even with JS being explicitly instructed to hide these elements, it is refusing to do so. A check of the HTML in the Dev Tool shows that the "visibility" of the elements is still set to "visible." The Dev also confirms that the userUpload() function is setting up the icons' respective IDs properly. Further, I even tried a try/catch statement to ensure the lines are running. No errors.

I'm considering rewriting the delete command to simply remove the HTML, since I now know this would not affect the synchronicity of element counts, arrays, etc.

[NullOperator404]

SOLUTION ATTEMPT 1: FAIL

I considered that rather than just hiding the elements, why not just delete the HTML element from the DOM altogether? The reason I didn't already have it set up this way was because I was concerned about the element count synchronicity getting thrown off. However, since deleting an element wouldn't affect the value of elementCount, I thought this might be a possible solution.

So I rewrote the delete function to just clear the HTML element instead of hiding it.

Unfortunately, this caused a cascade of errors, because numerous functions in the app rely on iterating through the sequence of generated elements. Errors are thrown when these for loops run and reach an element that no longer exists. The app is far too dependent on these for loops to warrant a rewrite; I doubt if even functionality could be possible without the for loops. Back to square one...

[NullOperator404]

SOLUTION ATTEMPT 2: SUCCESS

I must confess I'm not entirely sure why this works, but...

Instead of toggling the visibility to hidden, I instead changed the display to none. This worked. As I said, I don't know why display works and visibility doesn't, but there it is.

function deleteElement() {

    document.getElementById(scale).style.display = "none";
    document.getElementById(del).style.display = "none";
    document.getElementById(viewBox).style.display = "none";

}