堆棧內存溢出
  簡體   English   中英

如何使用JavaScript從頁面上刪除div

[英]How to remove a div off the page using JavaScript

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

問題描述

½我正在嘗試為動態創建的div設置關閉按鈕。

目前，以下代碼可以重復創建div，但似乎無法使div關閉按鈕正常工作。 我試圖做到這一點，即使打開多個div，關閉按鈕也可以在每個div上工作。

如果可以通過jQuery進行操作，請告訴我，因為我無法正常工作。 

 <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 個解決方案

解決方案1
 1  2016-08-26 16:35:02

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

您刪除動態創建的div的代碼幾乎可以正常工作，但是它正在查找id而不是class，並且無法正常工作，因為該事件將在內容添加到DOM之前添加。

為了解決這個問題，我們可以在jQuery中使用事件委托，如上所示。 我們將點擊附加到主體而不是關閉按鈕，僅在單擊關閉按鈕時才觸發它。

解決方案2
 1  2016-08-26 19:18:08

這將是您使用jQuery的功能。 請注意，您仍然必須將返回值添加到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/

解決方案3
 0  2016-08-26 16:34:20

以下代碼將幫助您：

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();
});

解決方案4
 0 已采納  2016-08-26 16:36:35

您可以使用以下代碼： 

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

這是演示代碼： 

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

解決方案5
 0  2016-08-26 16:37:01

當您運行該函數向類.close的所有元素添加關閉功能時，沒有此類元素。 因為您尚未創建任何div。 創建新的div時，應添加onclick偵聽器。 

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

解決方案6
 0  2016-08-26 16:37:40

將此添加到您的makeResponseBox函數中： 

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

解決方案7
 0  2016-08-26 16:41:49

您可以使用以下代碼： 

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

解決方案8
 0  2016-08-26 16:43:25

看到這個小提琴

以下是更新的JavaScript代碼。 

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);
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用jQuery從頁面上提取JavaScript 如何使用javascript刪除子div 如何使用Javascript在點擊時刪除HTML div 如何使用JavaScript刪除div？ 如何使用 javascript 刪除 div 中的元素？ 使用JavaScript從頁面中刪除div 如何使用GreaseMonkey刪除/關閉頁面上的Unselectable？ 刪除空 <div> 使用JavaScript 如何從頁面上的URL刪除http（s）？ 如何使用JavaScript從div內容中刪除單詞/字符串
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM