Question

我是一个新手。有人可以告诉我如何使用原始的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);
}

当我点击提交按钮时会发生什么，它会在很短的时间内消失，然后立即显示回来。我想在单击按钮时完全删除元素。

Answer 1

正在发生的是表单已提交，因此页面正在刷新（包含其原始内容）。您正在处理提交按钮上的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事件，虽然在页面加载周期中发生很晚，因此通常不适合连接事件处理程序（它发生在之后例如，em>最终加载了所有图像。

请注意，我必须处理一些处理浏览器差异的处理。您可能需要一个用于连接事件的函数，因此您不必每次都重复该逻辑。或者考虑使用jQuery，Prototype，YUI，Closure或any of several others这样的库来为您平滑浏览器差异。理解潜在的基础知识是非常重要的，无论是在JavaScript基础知识和DOM基础知识方面，还是库存在很多不一致的地方，并提供了许多方便的实用程序 - 比如一种方法连接处理浏览器差异的事件处理程序。其中大多数还提供了一种方法来设置一个函数（如load），以便在pageInit window触发之前很久就准备好操作DOM。

Answer 2

就这样做 element.remove();

在这里试试看

http://jsfiddle.net/4WGRP/

Answer 3

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

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

结帐Mozilla Developer Center了解基本的html和javascript资源

Answer 4

您的JavaScript是正确的。您的按钮有type="submit"，导致页面刷新。

Answer 5

它重新出现，因为您的提交按钮重新加载页面。防止此行为的最简单方法是向return false添加onclick，如下所示：

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

Answer 6

将输入类型更改为“按钮”。作为T.J.帕夫说，表格正在提交中。你的Javascript看起来是正确的，我推荐你试用非JQuery方式：）

Answer 7

这是正确的代码。可能发生的是您的表单正在提交，并且您会看到新页面（元素将再次存在）。

Answer 8

这很有效。只需从＆＃34;虚拟＆＃34;中删除按钮即可。 div如果你想保留按钮。

＆＃13;

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

＆＃13;

#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}

＆＃13;

<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>

＆＃13;

Answer 9

我也是新手，但这里有一个简单易行的方法：你可以使用outerHTML，它是整个标签，而不仅仅是一部分：

EX：<tag id='me'>blahblahblah</tag>的innerHTML将是blahblahblah，而outerHTML将是整个事物<tag id='me'>blahblahblah</tag>。

<小时/> 因此，对于该示例，如果要删除标记，它基本上删除其数据，因此如果将outerHTML更改为空字符串，则就像删除它一样。

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

Visibility更适合您的情况，但它会留下一个空白的透明空间它应用于。

我建议您进行显示，具体取决于您制作网页的方式。显示基本上从视图中删除元素，但您仍然可以在DevTools中看到它。希望这有帮助！

Answer 10

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

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

希望删除元素/按钮。

Answer 11

<强>的index.html

<input id="suby" type="submit" value="Remove DUMMY"/>

<强> myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})

如何使用Javascript删除HTML元素？

11 个答案: