JS element creation / removal on Mouseover / out conundrum

Question

JS only. On mouseover I'm calling a function I made that creates a div element with an image inside. I pass (this) as a parameter to the function. The function works and onmouseover it creates a child element and I can click it. However, If I add on mouse out of the div to remove itself, it will only do so if I hovered over it. If I didn't, the div stays and on next hover it adds another one. If I add on mouse out of the parent element to remove the div, I cannot get to hover over the child div, cause as soon as I leave the parent, the child div is removed. The parent element is an (a href) inside a "TD" in a table. The code goes like this:

    <script type="text/javascript">

function PopPanel(ownerElem) {
    var myParent = ownerElem.parentNode;

    var popanel = document.createElement("div");
    popanel.className = "divPopPanel";
    popanel.setAttribute("display", "block")
    var phoneimg = document.createElement("img");
    phoneimg.src = '/images/ImageAdditions/Phone.png';
    phoneimg.className = "popupPhone";
    popanel.appendChild(phoneimg);

    phoneimg.onclick = function () {
        try {
            location.replace("Mylauncher:\\\\nas\\vol5\\SYSTEM\\ITR\\Scripts\\SomeProgram.exe" + " " + ownerElem.innerText);
        }
        catch (err) {

        }

    };

    myParent.appendChild(popanel);

    popanel.onmouseout = function (e) { this.parentNode.removeChild(this) };  //this removes itself on mouseout.

    myParent.onmouseout = function (e) { popanel.parentNode.removeChild(popanel) }; // this removes the child element of the parent (which is the same element as above) on mouse out.
};

Answer 1

Well, after a long and miserable trial and error session, I've figured this out. First I've modified the code that generates and populates the gridview with data, like this: VB.net

    dt.Columns.Add("InternalPhoneDialer", Type.GetType("System.String"))
    Dim rn As New Random
    Dim randNum As Integer = rn.Next(12, 428)
    Dim internalphone As String = dr("InternalPhone").ToString
        If internalphone.Contains(" ") Then
            internalphone = internalphone.Substring(0, internalphone.IndexOf(" "))
            internalphone = internalphone & randNum.ToString()
        Else
            internalphone = internalphone & randNum.ToString()
        End If
    //Substitute the current column with the newly created one above
    dr("InternalPhoneDialer") = "<div id='popPanelWrapper" & internalphone & "' onmouseover='PopPanel(" & "popPanelWrapper" & internalphone & ");' onmouseleave='PopPanelClose(" & "popPanelWrapper" & internalphone & ");'> <a class='popPanelLink' href='javascript:void(0);' >" & dr("InternalPhone") & "</a> </div>"

I have made sure that I concatenate a unique id to each div in case the phone number is the same for another column (where I implement the same solution). So I added the column inner content + a random number and concatenated it to the DIV name. Then, on client side I've modified my script like this: JavaScript

    <script type="text/javascript">

function PopPanel(ownerElem) {
    var myParent = ownerElem;
    var phoneimgexist = !!document.getElementById("popupPhone");
    if (phoneimgexist) {
        return
    } else {
        var phoneimg = document.createElement("img");
        phoneimg.src = '/_layouts/15/images/ImageAdditions/Phone.png';
        phoneimg.id = "popupPhone";
        phoneimg.setAttribute("display", "block")
        myParent.appendChild(phoneimg);
    }
    phoneimg.onclick = function () {
        try {
            location.replace("launcher:\\\\drive01\\vol1\\SYSTEM\\ITR\\Scripts\\Jabber.exe" + " " + ownerElem.innerText);
        }
        catch (err) {

        }
    };
};

function PopPanelClose(ownerElem) {
    var myParent = ownerElem;
    var phoneimg = document.getElementById("popupPhone");
    var phoneimgexist = !!document.getElementById("popupPhone");
    if (phoneimgexist) {
        phoneimg.parentNode.removeChild(phoneimg);
    } else {
        return
    }
};

Now, on mouse over a GridVew cell that contains a phone number I get an icon. By clicking it I can call the number. In my opinion this solution is much better suited for the task, instead of creating a hidden div with image and data for every row in what could be thousands of entries in the GridView. This no doubt saves a lot of resources.