如何删除使用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); } 

当我点击提交button时会发生什么,它会在很短的时间内消失,然后立即出现。 我想完全删除元素,当我点击button。

发生的事情是表单正在被提交,所以页面正在刷新(以其原始内容)。 您正在处理提交button上的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; } 

但是你根本不需要(或者不需要)一个表单,而不是它的唯一目的是去除这个虚拟分隔符。 代替:

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; } } 

…然后调用pageInit(); 从页面body最后一个script标记(就在closures</body>标记之前),或从window load事件中,尽pipe这发生在页面加载周期的很晚 ,所以通常不适合连接事件处理程序(例如, 所有图像最终加载之后发生)。

请注意,我必须处理一些处理浏览器差异的操作。 你可能需要一个连接事件的函数,所以你不必每次都重复这个逻辑。 或者考虑使用像jQuery , Prototype , YUI , Closure或其他任何一个库来平滑浏览器差异。 了解底层的东西是非常重要的 ,无论是在JavaScript基础和DOM基础方面,但是图书馆处理很多不一致的地方,还提供了很多方便的工具 – 比如一个连接事件处理器的方法,浏览器差异。 他们中的大多数还提供了一种方法来设置一个函数(比如pageInit ),一旦DOM准备好被操作,就在window load之前就开始运行。

只要做这个element.remove();

在这里试试看

http://jsfiddle.net/4WGRP/

你应该使用inputtypes=“button”,而不是inputtypes=“提交”。

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

Checkout Mozilla开发人员中心提供基本的html和javascript资源

你的JavaScript是正确的。 您的button的type="submit" ,导致页面刷新。

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

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

将inputtypes更改为“button”。 正如TJ和Pav所说,表格正在提交。 你的Javascript看起来是正确的,我赞扬你试试非JQuery的方式:)

这是正确的代码。 可能发生的事情是您的表单正在提交,并且您会看到新的页面(元素将再次存在的位置)。

这工作。 如果你想保持button,只要从“虚拟” div删除button。

 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> 

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

例如: <tag id='me'>blahblahblah</tag>的innerHTML将会是blahblahblah ,而outerHTML将会是整个事物<tag id='me'>blahblahblah</tag>


所以,对于这个例子,如果你想删除标签,它基本上是删除它的数据,所以如果你把outerHTML改成一个空string,就像删除它。

 <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使元素仍然显示,只是你看不到它。 此外,您可以select文字,复制,粘贴,并执行您通常可以执行的所有操作,即使它是不可见的。


Visibility更符合您的情况,但会留下与应用元素一样大的空白透明空间。


我会build议你做显示,这取决于你如何使你的网页。 基本上从您的视图中删除元素,但仍然可以在DevTools中看到它。 希望这可以帮助!

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

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

它会希望删除元素/button。