How can I hide a div after adding to another?

I have some kind of dropdown menu dynamically added to divents divents. The problem is when someone clicks "close" then style.display = "none"

it won't work. I can change the background, opacity, size, but I cannot hide it.

The code looks like this:

    <style>
        html, body{
            height: 98%;
        }
        #editorViewport{
            width: 90%;
            height: 100%;
            min-width: 400px;
            min-height: 300px;
            position: relative;
            margin: 0 auto;
            border: 1px solid red;
        }
        #movingElementsContainer{
            display: none;
            top: 0px;
            left: 0px;
        }
        #addStartingElementBtn{
            width: 60px;
            height: 60px;
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
        }
        #addStartingElementBtn:hover{
            background-color: #c9eac6;
            border: 1px solid grey;
            cursor: pointer;
        }
        #elementsMenuContainer{
            width: 150px;
            border: 1px solid grey;
            background-color: white;
            min-height: 100px;
            padding: 5px;
            position: absolute;
            z-index: 2;
            display: none;
        }
        .elementOption{
            width: 90%;
            padding: 5px;
            border: 1px solid grey;
        }
        .elementOption:hover{
            border: 1px solid red;
            cursor: pointer;
        }
    </style>

<body>
    <div id="editorViewport">

        <div id="addStartingElementBtn" data-Owner="starting" data-Side="starting" class="openElementsMenu">
            Click!
        </div>
    </div>
    <div id="movingElementsContainer">
        <div id="elementsMenuContainer" data-Open="false" data-Owner="" data-Side="">
            <div data-Kind="1" class="elementOption">
                One
            </div>
            <div data-Kind="2" class="elementOption">
                Two
            </div>
            <div data-Kind="3" class="elementOption">
                Three
            </div>
            <div data-Kind="99" class="elementOption">
                Close
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">

    function prepareEventHandlers(){
        var openElementsMenu = document.getElementsByClassName("openElementsMenu");
        var event = window.attachEvent ? 'onclick' : 'click';
        for(var i = 0; i < openElementsMenu.length; i++){
            if(openElementsMenu[i].addEventListener){
                openElementsMenu[i].addEventListener('click', elementsMenu, false);
            }else{
                openElementsMenu[i].attachEvent('onclick', elementsMenu);
            }
        }
        var elementOption = document.getElementsByClassName("elementOption");
        for(var i = 0; i < elementOption.length; i++){
            if(elementOption[i].addEventListener){
                elementOption[i].addEventListener('click', selectElementToCreate, false);
            }else{
                elementOption[i].attachEvent('onclick', selectElementToCreate);
            }
        }
    }
    window.onload = function(){
        prepareEventHandlers();
    }

    var totalElements = 0;
    var editorViewport = "editorViewport";
    var selectedElementId = ""; 

    var elementsMenu = function(){
        var elementsMenu = document.getElementById("elementsMenuContainer")
        this.appendChild(elementsMenu);
        elementsMenu.style.display = "block";
        elementsMenu.style.left = 61 + "px";
        elementsMenu.style.top = "0px";
        elementsMenu.setAttribute("data-Open", "true");
        elementsMenu.setAttribute("data-Owner", this.getAttribute("data-Owner"));
        elementsMenu.setAttribute("data-Side", this.getAttribute("data-Side"));
    }
    var selectElementToCreate = function(){
        var dataKind = this.getAttribute('data-Kind');
        var parentNode = document.getElementById(this.parentNode.id);

        alert(dataKind)
        if(dataKind == "99"){
            parentNode.style.display = "none"
            parentNode.setAttribute("data-Open", "false");
            parentNode.setAttribute("data-Owner", "");
            parentNode.setAttribute("data-Side", "");
        }
    }
</script>

      

Here is a JSFiddle

Thanks a lot for the advice!

+3


source to share


2 answers


            var selectElementToCreate = function(e){
            var dataKind = this.getAttribute('data-Kind');
            var parentNode = document.getElementById(this.parentNode.id);

            alert(dataKind)
            if(dataKind == "99"){
                console.log(parentNode);
                parentNode.style.display = "none"
                parentNode.setAttribute("data-Open", "false");
                parentNode.setAttribute("data-Owner", "");
                parentNode.setAttribute("data-Side", "");
                alert("Wont Close :");
            }
            e.stopPropagation();
        }

      



+2


source


You move an item to an item with a click.

var elementsMenu = document.getElementById("elementsMenuContainer")
    this.appendChild(elementsMenu);

      

First, the menu item's click handler is executed, which sets the property display

to none

, and as the click event bubbles, the wrapper item's event handler is executed and sets the property to a display

value block

.



You must stop the propagation of the event with the stopPropagation

object method event

.

var selectElementToCreate = function (event) {
    event.stopPropagation();
    var dataKind = this.getAttribute('data-Kind');
    var parentNode = this.parentNode;
    if (dataKind == "99") {
        parentNode.style.display = "none";
        // ...
    }
}

      

+1


source







All Articles