如何使用Javascript删除HTML元素？ [英] How to remove an HTML element using Javascript?
问题描述
我是一个新手。有人可以告诉我如何使用原始的Javascript而不是jQuery去除HTML元素。
index.html
< html>
< head>
< script type =text / javascriptsrc =myscripts.js> < /脚本>
< style>
#dummy {
min-width：200px;
min-height：200px;
max-width：200px;
最大高度：200px;
背景颜色：＃fff000;
}
< / style>
< / head>
< body>
< div id =dummy>< / div>
< form>
< input type =submitvalue =删除DUMMYonclick =removeDummy（）;/>
< / form>
< / body>
function removeDummy（）{
var elem = document.getElementById（'dummy'）;
elem.parentNode.removeChild（elem）;
}
当我点击提交按钮时会发生什么，它会消失非常非常短的时间，然后立即出现。我想完全删除元素，当我点击按钮。
发生什么事是表单正在提交，所以该页面正在刷新（使用其原始内容）。您正在处理提交按钮上的点击事件。
如果您想删除元素，并且不是提交表单，而是在表单上处理提交事件，并从您的表单中返回 false
HTML：
< form onsubmit =return removeDummy（）;>
< input type =submitvalue =Remove DUMMY/>
< / form>
JavaScript：
function removeDummy（）{
var elem = document.getElementById（'dummy'）;
elem.parentNode.removeChild（elem）;
返回false;
}
但是您根本不需要（或想要）表单，如果其唯一目的是删除虚拟div，则不是。相反：
HTML：
< input type =button value =删除DUMMYonclick =removeDummy（）/>
JavaScript：
function removeDummy（）{
var elem = document.getElementById（'dummy'）;
elem.parentNode.removeChild（elem）;
返回false;
}
然而，那种设置事件处理程序的风格是过时的。你似乎有良好的直觉，因为你的JavaScript代码是在它自己的文件等。下一步是进一步采取措施，避免使用 onXYZ 属性来连接事件处理程序。相反，在您的JavaScript中，您可以将它们与更新版本（约2000年）挂钩： b
< input id ='btnRemoveDummy'type =buttonvalue =Remove DUMMY/>
JavaScript：
function removeDummy（）{
var elem = document.getElementById（'dummy'）;
elem.parentNode.removeChild（elem）;
返回false;
}
函数pageInit（）{
//连接删除虚拟按钮
var btn = document.getElementById（'btnRemoveDummy'）;
if（btn.addEventListener）{
// DOM2 standard
btn.addEventListener（'click'，removeDummy，false）;
else if（btn.attachEvent）{
// IE（IE9终于支持上面的，虽然）
btn.attachEvent（'onclick'，removeDummy）;
}
else {
//真的是旧的或非标准的浏览器，请尝试DOM0
btn.onclick = removeDummy;
$ / code $ / pre
...然后调用 pageInit（）; 来自脚本标签位于页面的最后 body （就在结束< / body> 标记之前），或从窗口 事件，虽然在页面加载周期中很晚，所以通常不适合连接事件处理程序（它在之后发生图像终于加载，例如）。
请注意，我必须进行一些处理来处理浏览器差异。您可能需要一个用于连接事件的函数，以便您不必每次都重复该逻辑。或者考虑使用像 jQuery ，原型， YUI ， Closure ，或其他几种为你平滑浏览器的差异。从JavaScript基础和DOM基础知识的角度来理解正在发生的潜在事情是非常重要的，但图书馆处理很多不一致的问题，并且还提供了许多方便的实用程序 —就像挂钩处理浏览器差异的事件处理程序一样。它们中的大多数还提供了一种方法来设置一个函数（比如 pageInit ），以便在DOM准备好被操作之后立即运行，早于窗口 加载激发。
I am a total newbie. Can somebody tell me how to remove an HTML element using the original Javascript not jQuery.
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);
}
What happens when I click the submit button, is that it will disappear for a very very short time and then appear back immediately. I want to completely remove the element when I click the button.
解决方案 What's happening is that the form is getting submitted, and so the page is being refreshed (with its original content). You're handling the click event on a submit button.
If you want to remove the element and not submit the form, handle the submit event on the form instead, and return false from your handler:
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;
}
But you don't need (or want) a form for that at all, not if its sole purpose is to remove the dummy div. Instead:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
However, that style of setting up event handlers is old-fashioned. You seem to have good instincts in that your JavaScript code is in its own file and such. The next step is to take it further and avoid using onXYZ attributes for hooking up event handlers. Instead, in your JavaScript, you can hook them up with the newer (circa year 2000) way instead:
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;
}
}
...then call pageInit(); from a script tag at the very end of your page body (just before the closing </body> tag), or from within the window load event, though that happens very late in the page load cycle and so usually isn't good for hooking up event handlers (it happens after all images have finally loaded, for instance).
Note that I've had to put in some handling to deal with browser differences. You'll probably want a function for hooking up events so you don't have to repeat that logic every time. Or consider using a library like jQuery, Prototype, YUI, Closure, or any of several others to smooth over those browser differences for you. It's very important to understand the underlying stuff going on, both in terms of JavaScript fundamentals and DOM fundamentals, but libraries deal with a lot of inconsistencies, and also provide a lot of handy utilities — like a means of hooking up event handlers that deals with browser differences. Most of them also provide a way to set up a function (like pageInit) to run as soon as the DOM is ready to be manipulated, long before window load fires.
这篇关于如何使用Javascript删除HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
