stackoom
  简体   繁体   中英

How to remove a div off the page using JavaScript

 原文  2016-08-26 16:23:58  6   8    javascript/ html/ css

Question

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

8 answers

solution1
 1  2016-08-26 16:35:02

$("body").on("click", ".content .close", function() {
    $(this).parent().remove();
});

Your code to remove the dynamically created div almost worked, but it was looking for the id close instead of class and wouldn't work since the event would be added before the content is added to the DOM.

To solve that we can use event delegation in jQuery as shown above. We attach the click to the body instead of the close button and only make it trigger when the close button is clicked.

solution2
 1  2016-08-26 19:18:08

This would be your function using jQuery. Note that you still have to add the return value to the DOM. 

function makeResponseBox() {
    $close = $('<div>').addClass('close');
    $window = $('<div>').addClass('window');
    $window.append($close);
    $close.on('click', function(e){
        e.preventDefault();
        // removes the enclosing div.window
        $(e.target).closest('.window').remove();
        return false;
    });
    return $window;
}

https://jsfiddle.net/p96Lq65s/17/

solution3
 0  2016-08-26 16:34:20

The below code will help you with that:

JavaScript: 

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" );
        spanclose.setAttribute("onclick", "removeDiv(this)" );
        responseBox.setAttribute("class", "content" );
        responseBox.appendChild(spanclose);
        document.getElementById('container').appendChild(responseBox);
    }
} // Close function (makeResponseBox)

window.onload = makeResponseBox;

function removeDiv(elem){
    elem.parentElement.remove()
}

jQuery 

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;
$( "#container" ).on( "click",".close", function() {
    $(this).parent().remove();
});

solution4
 0 ACCPTED  2016-08-26 16:36:35

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>

solution5
 0  2016-08-26 16:37:01

When you run the function to add close functionality to all elements with class .close there are no such elements. Because you haven't created any divs yet. You should add the onclick listener when you create new divs. 

 <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> 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"); spanclose.onclick = function() { this.parentNode.parentNode .removeChild(this.parentNode); return false; }; responseBox.setAttribute("class", "content"); responseBox.appendChild(spanclose); document.getElementById('container').appendChild(responseBox); } } //close function (makeResponseBox) window.onload = makeResponseBox; </script> </body> </html>

solution6
 0  2016-08-26 16:37:40

Add this to your makeResponseBox function: 

spanclose.onclick=function(){
this.parentNode.removeChild(this);
}

solution7
 0  2016-08-26 16:41:49

You can use this code: 

<script type="text/javascript">
    $(document).ready(function() {
        $("body").on('click', '.close', function(e) {
            $(e.target.parentElement).remove();
        });
    });
</script>

solution8
 0  2016-08-26 16:43:25

See this fiddle

Below is the updated JavaScript code. 

function add() {
    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.setAttribute("onclick", "remove(this)");
    responseBox.appendChild(spanclose);
    document.getElementById('container').appendChild(responseBox);
}

function remove(elt) {
    elt.parentNode.removeChild(elt);
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to pull the javascript off of a page using jQuery how to remove child div using javascript How to remove HTML div on click using Javascript How do I remove a div using javascript? How to remove elements inside div using javascript? Remove div from page with JavaScript How would I remove/turn Unselectable off on a page using GreaseMonkey? Remove Empty <div> using JavaScript How to remove http(s) off of a URL on the page? How to remove a word/string from div content using javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM