如何使用 Javascript 删除 HTML 元素？

我完全是个新手。有人能告诉我如何使用原来的 Javascript 而不是 jQuery 删除 HTML 元素吗。

index.html

<html>
<head>
<script type="text/javascript" src="myscripts.js" > </script>
<style>
#dummy {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
background-color: #fff000;
}
</style>
</head>
<body>
<div id="dummy"></div>


<form>
<input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
</form>
</body>

myscripts.js

function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
}

当我点击提交按钮时，它会消失很短的一段时间，然后立即出现。我想完全删除元素时，我单击按钮。

433941 次浏览
小开
最佳答案

正在发生的情况是表单正在被提交，因此页面正在刷新(使用其原始内容)。您正在处理提交按钮上的 click事件。

如果您希望删除元素并且 没有提交表单，那么改为处理表单上的 submit事件，并从处理程序返回 false:

HTML:

<form  onsubmit="return removeDummy(); ">
<input type="submit" value="Remove DUMMY"/>
</form>

JavaScript:

function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}

但是您根本不需要(或者不需要)表单，如果它的唯一目的是删除虚拟 div，那么就不需要。相反:

HTML:

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

JavaScript:

function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}

但是 ，这种设置事件处理程序的方式已经过时了。您似乎有很好的直觉，因为您的 JavaScript 代码位于自己的文件中等等。下一步是更进一步，避免使用 onXYZ属性连接事件处理程序。相反，在你的 JavaScript 中，你可以用更新的(大约2000年)方式来连接它们:

HTML:

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

JavaScript:

function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
function pageInit() {
// Hook up the "remove dummy" button
var btn = document.getElementById('btnRemoveDummy');
if (btn.addEventListener) {
// DOM2 standard
btn.addEventListener('click', removeDummy, false);
}
else if (btn.attachEvent) {
// IE (IE9 finally supports the above, though)
btn.attachEvent('onclick', removeDummy);
}
else {
// Really old or non-standard browser, try DOM0
btn.onclick = removeDummy;
}
}

然后从页面 body的最后一个 script标签(就在结束的 </body>标签之前)调用 pageInit();，或者从 window load事件中调用 pageInit();，尽管这发生在页面加载周期的 很晚了中，因此通常不利于连接事件处理程序(例如，发生在 之后中的情况是所有图像最终都已加载)。

请注意，我必须加入一些处理来处理浏览器的差异。您可能需要一个用于连接事件的函数，这样就不必每次都重复这个逻辑。或者考虑使用像 JQuery、 原型机、 YUI、 了结或 其他几种中的任何一种这样的库来为您消除这些浏览器差异。非常重要可以理解底层的东西，包括 JavaScript 基本原理和 DOM 基本原理，但是库可以处理很多不一致的地方，并且还提供了很多方便的实用程序 & mash; 像是一种连接事件处理程序的方法，可以处理浏览器的差异。它们中的大多数还提供了一种设置函数(如 pageInit)的方法，只要 DOM 准备好可以操作，就可以立即运行，这比 window load触发要早得多。

小开

您的 JavaScript 是正确的。您的按钮有 type="submit"导致页面刷新。

小开

它重新出现是因为您的提交按钮重新加载了页面。防止这种行为的最简单方法是向 onclick添加一个 return false，如下所示:

<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />
小开

您应该使用 input type = “ button”而不是 input type = “ submit”。

<form>
<input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
</form>

检查基本 html 和 javascript 资源的 Mozilla 开发中心

小开

这是正确的密码。可能发生的情况是您的表单正在提交，并且您看到新的页面(其中的元素将再次存在)。

小开

将输入类型更改为“按钮”。正如 T.J. 和 Pav 所说，表格已经提交了。您的 Javascript 看起来是正确的，我赞扬您以非 JQuery 的方式尝试它:)

小开

照我说的做 element.remove();

试试这个，看

Http://jsfiddle.net/4wgrp/

小开

如果你想保留按钮，只要从“假人”div中移除按钮就可以了。

function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
#dummy {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
background-color: #fff000;
}
<div id="dummy">
<button onclick="removeDummy()">Remove</button>
</div>

小开

我仍然是一个新手，但这里有一个简单的方法: 你可以使用 outHTML，它是整个标签，而不仅仅是一部分:

例如: <tag id='me'>blahblahblah</tag>的 innerHTML 是 blahblahblah，outHTML 是整个 <tag id='me'>blahblahblah</tag>。

因此，对于这个例子，如果您想删除标记，基本上就是删除它的数据，所以如果您将 outHTML 更改为一个空字符串，就像删除它一样。

<body>
<p id="myTag">This is going to get removed...</p>
<input type="button" onclick="javascript:
document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
" value="Remove Praragraph">
</body>

相反，如果您不想显示它，可以使用可见性、不透明度和显示属性在 JS 中对它进行样式化。

document.getElementById('foo').style.visibility = hidden;
//or
document.getElementById('foo').style.opacity = 0;
//or
document.getElementById('foo').style.display = none;

请注意， opacity使元素仍然显示，只是您不能经常看到它。此外，您可以选择文本，复制，粘贴，并做一切您可以正常做，即使它是不可见的。Visibility更适合您的情况，但是它会留下一个空白的透明空间，大小与它应用到的元素一样。我建议你做显示，这取决于你如何制作你的网页。显示基本上从视图中删除元素，但是您仍然可以在 DevTools 中看到它。 希望这个能帮上忙！

小开

尝试在 剧本中运行此代码。

document.getElementById("dummy").remove();

希望它能够删除元素/按钮。

小开

Html

<input id="suby" type="submit" value="Remove DUMMY"/>

Myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded


document.getElementById("suby").addEventListener("click", e => {
document.getElementById("dummy").remove()
})


})

提交答案