如何使用Javascript删除HTML元素？

Z时代
2024-01-10
分类：问答

我是一个新手。有人可以告诉我如何使用原始Javascript（而不是jQuery）删除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>

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

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

回答：

发生的情况是正在提交表单，因此页面（带有其原始内容）正在刷新。您正在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;
    }
}