Pow Pow - 3 months ago 5
CSS Question

How to remove a div off the page using JavaScript

½I'm trying to make a close button for a dynamically created div.

At the moment the below code can create a div repeated, but I cannot seem to get the div close button to work. I'm trying to make it so even if multiple divs are open, the close button works on each.

If there is a way to do via jQuery please let me know as I couldn't get it to work.



<html>
<title>Test Platform</title>

<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<style>
body {
margin: 0 0;
}
#container {
border: 1px solid blue;
white-space: nowrap;
overflow: auto;
font-size: 0;
}

#container > * {
font-size: 8px;
font-family: 'Open Sans', sans-serif;
}

#headerbar {
font-size: 30px;
color: white;
padding-left: 10px;
border: 1px solid darkgrey;
height: 50px;
background-color: darkslateblue;
}
#sidebar {
display: inline-block;
color: black;
border: 1px solid darkgrey;
width: 50px;
height: 100vh;
vertical-align: top;
background-color: lightgrey;
text-align: center;
padding-top: 10px;
}
.content {
display: inline-block;
width: 200px;
height: 100vh;
border: 1px solid lightslategrey;
margin: 0 1px 0 0;
vertical-align: top;
background-color: lightsteelblue;
}
.close {
display: inline-block;
padding: 2px 5px;
background: #ededed;
float: right;
}
.close:hover {
float: right;
display: inline-block;
padding: 2px 5px;
background: #ccc;
color: #fff;
}
</style>

<body>
<div id='container'>
<div id='headerbar'>Header Div</div>
<div id='sidebar'> <input type="button" value="O" id="calculate" />
<br/><br/>
<br/><br/>
</div>
</div>

<script type='text/javascript'>
window.onload = function(){
document.getElementById('close').onclick = function(){
this.parentNode.parentNode.parentNode
.removeChild(this.parentNode.parentNode);
return false;
};
};
</script>

<script>
function makeResponseBox() {
document.getElementById("calculate").onclick = function()
{
var responseBox = document.createElement("DIV"); //create <div>
var spanclose = document.createElement("span");
var spantext = document.createTextNode("X");
spanclose.appendChild(spantext);
spanclose.setAttribute("class", "close" );
responseBox.setAttribute("class", "content" );
responseBox.appendChild(spanclose);
document.getElementById('container').appendChild(responseBox);
}
} // Close function (makeResponseBox)
window.onload = makeResponseBox;
</script>
</body>
</html>




Answer

You can use this code:

$("#container").on("click",".close",function(){
    $(this).closest(".content").hide()
})

This is the demo code:

<html>
    <title>Test Platform</title>

    <head>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   

    <style>
        body {
            margin: 0 0;
        }
        #container {
            border: 1px solid blue;
            white-space: nowrap;
            overflow: auto;
            font-size: 0;
        }

        #container > * {
            font-size: 8px;
            font-family: 'Open Sans', sans-serif;
        }

        #headerbar {
            font-size: 30px;
            color: white;
            padding-left: 10px;
            border: 1px solid darkgrey;
            height: 50px;
            background-color: darkslateblue;
        }
        #sidebar {
            display: inline-block;
            color: black;
            border: 1px solid darkgrey;
            width: 50px;
            height: 100vh;
            vertical-align: top;
            background-color: lightgrey;
            text-align: center;
            padding-top: 10px;
        }
        .content {
            display: inline-block;
            width: 200px;
            height: 100vh;
            border: 1px solid lightslategrey;
            margin: 0 1px 0 0;
            vertical-align: top;
            background-color: lightsteelblue;
        }
        .close {
            display: inline-block;
            padding: 2px 5px;
            background: #ededed;
            float: right;
        }
        .close:hover {
            float: right;
            display: inline-block;
            padding: 2px 5px;
            background: #ccc;
            color: #fff;
        }
    </style>
    </head>
    <body>
        <div id='container'>
            <div id='headerbar'>Header Div</div>
            <div id='sidebar'> <input type="button" value="O" id="calculate" />
                <br/><br/>
                <br/><br/>
            </div>
        </div>

        <script type='text/javascript'>
            $("#container").on("click",".close",function(){
                $(this).closest(".content").hide()
            })
        </script>

        <script>
            function makeResponseBox() {
                document.getElementById("calculate").onclick = function()
                {
                    var responseBox = document.createElement("DIV"); //create <div>
                    var spanclose = document.createElement("span");
                    var spantext = document.createTextNode("X");
                    spanclose.appendChild(spantext);
                    spanclose.setAttribute("class", "close" );
                    responseBox.setAttribute("class", "content" );
                    responseBox.appendChild(spanclose);
                    document.getElementById('container').appendChild(responseBox);
                }
            } // Close function (makeResponseBox)
            window.onload = makeResponseBox;
        </script>
    </body>
</html>

Comments