[英]how to remove multiple div element generated by onclick using jquery
[英]How to remove the content from a “div” element using a button “onclick” function?
我有一个div
元素,其中包含许多图像。 当用户单击一个按钮时,我希望删除div
的内容(而不是div
本身,我想重用div
来潜在地添加新内容)。
在我的HTML中, div
和button
定义为:
<body>
...
<div class="MyDiv"></div>
...
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
...
</body>
我如何编写一个函数来删除该div
中的所有元素?
您必须致电removeChild
:
function removeDivFunction() {
MyDiv.parentNode.removeChild(MyDiv);
}
<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();
});
});
function removeDivFunction() {
$(".MyDiv").remove();
}
David已经为您指出了现有的问题/解决方案。
供参考,请阅读: http : //www.w3schools.com/js/js_htmldom_nodes.asp
将id分配给div总是一个好主意。
另外,如果您使用的是jQuery,则可以通过$(“#divid”)。remove()删除元素以供参考,请参见: https ://api.jquery.com/remove/
我希望这有帮助。
<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);
}
您可以尝试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 = "";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.