Question

我有一个包含许多图片的div元素。当用户点击按钮时，我希望删除div的内容（而不是div本身，我想重复使用div来添加新内容。）

在我的HTML中，div和button定义为：

<body>
    ...
    <div class="MyDiv"></div>
    ...
    <button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
    ...
</body>

如何编写一个删除此div的所有元素的函数？

Answer 1

您必须致电removeChild：

function removeDivFunction() {
   MyDiv.parentNode.removeChild(MyDiv);
}

Answer 2

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>

<button>Remove div element</button>


$(document).ready(function(){
    $("button").click(function(){
        $("#div1").remove();
    });
});

Answer 3

function removeDivFunction() {
    $(".MyDiv").remove();
}

Answer 4

David已经向您指出了现有的问题/解决方案供参考，请阅读：http://www.w3schools.com/js/js_htmldom_nodes.asp
将id分配给div总是一个好主意。

此外，如果你使用的是jQuery，你可以删除元素$（＆＃34; #divid＆＃34;）。remove（）作为参考，请参阅：https://api.jquery.com/remove/

我希望这会有所帮助。

Answer 5

<div class="MyDiv">I need to remove</div>
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>  
function removeDivFunction() {
    var element = document.getElementsByClassName("MyDiv")[0];
    element.parentNode.removeChild(element);
}

<强> DEMO

Answer 6

你可以试试 HTML

<div id="some">Example</div>
<button onclick="myFunction()">Click me</button>

的javascript

function myFunction() {
    var child = document.getElementById("some");
    child.parentNode.removeChild(child);
}

如果你想删除DIV的内容，请使用

  child.innerHTML = "";

如何使用“onclick”按钮从“div”元素中删除内容？

6 个答案: