如何使用Javascript删除HTML元素？

124

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

当我单击“提交”按钮时，将发生一个非常短的时间，然后立即显示回来的情况。单击按钮时，我想完全删除该元素。

javascript html

— 新手编码器
source

如果我单击它，发现错误并按Stop怎么办？

— Alex

抱歉，这是主题，但实际上很有趣，他（她）将自己命名为“ Newbie Coder”，现在该个人资料的声誉约为9000。在“美好的过去”中发问如今确实很有利。:)

— Rene

189

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

— TJ人群
source

将其更改为type="button"或放入return false;您的JS函数中

— Pav

@Pav：我想坚持下去，因为这只是一个实验性练习。我将做一些使用Submit的项目，所以我会更好地习惯它。

— 新手编码者

@Newbie：我添加了一些其他说明。

— TJ Crowder

2

为什么不只是elem.remove（）;

— 穆罕默德·乌默

1

@ Ghos3t-几种方法：1.您从属性样式处理程序调用的任何函数都必须是全局函数，并且全局名称空间已经是Really Crowded™，并且很容易选择与其他东西冲突的函数名（这是可以通过使用名称可能唯一的对象并在上面放置所有处理程序来解决）。2.使用旧的属性样式方式（或分配给onxyz元素上的属性）仅允许使用单个处理程序，并且如果分配给属性，则替换以前存在的任何内容，因此它不能与其他属性很好地配合使用。（续）

— TJ Crowder

34

做这个 element.remove();

在这里尝试一下

http://jsfiddle.net/4WGRP/

— 穆罕默德·乌默尔
source

5

请注意这一点，因为这似乎是一个相当新的功能，并且不具有完整的浏览器支持，即IE和FF 22及更早版本（red-team-design.com/…）。

— dule 2013年

1

我个人还要再等5年才能使用它

— slebetman

2

好吧，现在似乎无法支持此功能：caniuse.com/#search=remove。我接受现在使用它。如果你绝对需要支持IE11的，我想填充工具可以很容易地构造...

— jehon

5

编写面向未来的代码比编写过去的代码要好。节省您的维护时间，并使用.remove()

— Gibolt

9

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

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

检出Mozilla开发人员中心以获取基本的html和javascript资源

— 霍克
source

1

我将您的链接从W3Schools更改为Mozilla开发人员中心。看看我的推理w3fools.com …除此之外，很好的答案:)

— Alastair Pitts

2

@Alastair Pitts-好的。我只是想点PO到HTML和JS的基本教程..

— CoderHawk

8

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

— 帕夫
source

5

由于您的提交按钮重新加载了页面，因此重新出现。为防止这种行为的最简单的方法是将添加return false到onclick像这样：

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

— 视力
source

4

将输入类型更改为“按钮”。正如TJ和Pav所说，该表单正在提交。您的Javascript看起来正确，我建议您尝试使用非JQuery的方法：）

— 新塘
source

我认为我会坚持提交，因为这只是我将来使用提交的项目的实验性练习，所以我最好习惯它……

— Newbie Coder

4

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()
    })

})

— 动机
source

3

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

— 亚历克斯
source

3

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

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

希望它将删除元素/按钮。

— 死神
source

2

这可行。div如果要保留按钮，只需从“虚拟”按钮中删除按钮即可。

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>

展开摘要

— 达特尔02
source

1

我仍然还是一个新手，但这是一种简单的方法：您可以使用externalHTML，这是整个标记，而不仅仅是一部分：

例如：<tag id='me'>blahblahblah</tag>的innerHTML将是blahblahblah，而externalHTML将是整个东西<tag id='me'>blahblahblah</tag>。

因此，例如，如果要删除标记，则基本上是在删除其数据，因此，如果将externalHTML更改为空字符串，则就像删除它一样。

<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中看到它。希望这可以帮助！

— 哈里·詹姆斯·波特27
source