开发者问题收集

如何使用 Javascript 删除 HTML 元素?

2011-05-09
453578

我完全是个新手。有人能告诉我如何使用原始 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);
}

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

3个回答

现在的情况是表单正在提交,因此页面正在刷新(包含其原始内容)。您正在处理提交按钮上的 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 事件中调用,尽管这在页面加载周期的 非常晚 发生,因此通常不适合连接事件处理程序(例如,它发生在 所有图像最终加载完毕之后 )。

请注意,我必须进行一些处理来应对浏览器差异。您可能需要一个函数来连接事件,这样您就不必每次都重复该逻辑。或者考虑使用 jQuery Prototype YUI Closure 其他任意一个 库来为您消除这些浏览器差异。了解底层发生的事情 非常重要 ,无论是 JavaScript 基础知识还是 DOM 基础知识,但库处理了很多不一致的问题,也提供了很多方便的实用程序——比如连接事件处理程序以处理浏览器差异的方法。它们中的大多数还提供了一种方法来设置一个函数(如 pageInit ),该函数在 DOM 准备好被操作时立即运行,远在 window load 触发之前。

T.J. Crowder
2011-05-09

只需这样做 element.remove();

在这里尝试一下看

http://jsfiddle.net/4WGRP/

Muhammad Umer
2013-07-10

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

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

查看 Mozilla 开发者中心 获取基本的 html 和 javascript 资源

Sandeep Kumar M
2011-05-09