New*_*der 117 html javascript
我是个新手.有人可以告诉我如何使用原始的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);
}
单击提交按钮时会发生什么,它会在很短的时间内消失,然后立即显示回来.我想在单击按钮时完全删除元素.
T.J*_*der 176
发生的事情是表单已提交,因此页面正在刷新(包含其原始内容).您正在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;
}
}
...然后调用pageInit();从一个script标签,在你的页面的最末端body(在结束之前</body>标签),或者从内部window load事件,虽然发生这种情况非常晚在页面加载周期,所以通常不利于挂钩事件处理程序(例如,在最终加载所有图像之后).
请注意,我必须处理一些处理浏览器差异的处理.您可能需要一个用于连接事件的函数,因此您不必每次都重复该逻辑.或者考虑使用像jQuery,Prototype,YUI,Closure或其他任何一个库来为你平滑浏览器差异.这是非常重要的了解底层的东西怎么回事,两者在JavaScript的基本面和DOM基本面方面,但库处理很多不一致的,同时还提供了很多方便的工具-像挂钩事件处理与交易的手段浏览器差异.它们中的大多数还提供了一种方法来设置一个函数(如pageInit),一旦DOM准备好被操作,就可以在window load火灾之前运行.
Muh*_*mer 32
就这样做吧
element.remove();
试试看这里
您应该使用input type ="button"而不是input type ="submit".
<form>
<input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
</form>
结帐Mozilla开发人员中心获取基本的html和javascript资源
它会重新出现,因为您的提交按钮会重新加载页面.为防止这种行为的最简单的方法是将添加return false到onclick像这样:
<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />
小智 5
尝试在您的脚本中运行此代码。
document.getElementById("dummy").remove();
它有望删除元素/按钮。
索引.html
<input id="suby" type="submit" value="Remove DUMMY"/>
我的脚本.js
document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded
document.getElementById("suby").addEventListener("click", e => {
document.getElementById("dummy").remove()
})
})
| 归档时间： |
|
| 查看次数： |
339838 次 |
| 最近记录： |