如何使用Javascript移除HTML元素？

23 浏览
0 Comments

如何使用Javascript移除HTML元素？

我是一个完全的新手。有人可以告诉我如何使用原始的Javascript而不是jQuery来删除HTML元素吗？\nindex.html\n

\nmyscripts.js\n

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

\n当我点击提交按钮时，它会短暂地消失，然后立即重新出现。我想在点击按钮时完全删除该元素。

0

3 答案

0 Comments

从上述内容中，我们可以得出以下结论：

问题的出现原因：根据内容中的描述，问题的出现原因是在HTML中使用了错误的input类型。应该使用input type="button"而不是input type="submit"。

解决方法：根据内容中的代码示例，可以通过以下方式解决问题：

1. 在HTML中使用正确的input类型：将input type="submit"替换为input type="button"。

此外，内容中还提到了一些建议和资源：

1. 可以访问Mozilla Developer Center（链接：https://developer.mozilla.org/en-US/web）获取HTML和JavaScript的基础资源。

2. 可以访问w3fools.com（链接：http://w3fools.com/）了解有关将链接从W3Schools更改为Mozilla Developer Center的原因。

以上就是关于如何使用JavaScript移除HTML元素的问题的原因和解决方法。

0
0 Comments

如何使用Javascript删除HTML元素？

有一个非常简单的方法可以删除HTML元素，即使用element.remove();。你可以在这里尝试一下：http://jsfiddle.net/4WGRP/。需要注意的是，这种方法似乎是一个相对较新的添加，不支持所有浏览器，特别是IE和FF的早期版本（red-team-design.com/…）。

个人建议再等待5年再使用这个方法。不过现在看来，这个方法已经有比较好的支持：caniuse.com/#search=remove。如果你绝对需要支持IE11，我想可以很容易地构建一个polyfill。

编写面向未来的代码比为过去的编程更好。节省维护时间，使用.remove()方法吧！

0
0 Comments

如何使用Javascript删除HTML元素？

问题的出现原因是，表单正在被提交，因此页面正在刷新（使用其原始内容）。您正在处理提交按钮的点击事件。

如果您想删除该元素而不是提交表单，请改为在表单上处理提交事件，并从处理程序中返回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() {
    // 钩住“删除虚拟”按钮
    var btn = document.getElementById('btnRemoveDummy');
    if (btn.addEventListener) {
        // DOM2标准
        btn.addEventListener('click', removeDummy, false);
    }
    else if (btn.attachEvent) {
        // IE（IE9最终支持上述事件，但是）
        btn.attachEvent('onclick', removeDummy);
    }
    else {
        // 非常旧或非标准的浏览器，尝试DOM0
        btn.onclick = removeDummy;
    }
}

然后，在页面的body标签结束之前（紧接着关闭的标签之前），或者在window的load事件中调用pageInit();，尽管这发生得非常晚，在页面加载周期中通常不适合连接事件处理程序（例如，它发生在所有图像最终加载之后）。

请注意，我已经添加了一些处理来处理浏览器之间的差异。您可能希望编写一个用于连接事件的函数，以便您不必每次都重复该逻辑。或者考虑使用类似jQuery、Prototype、YUI、Closure或其他一些库，以便为您解决这些浏览器差异。了解底层的JavaScript基础知识和DOM基础知识非常重要，但是库处理了许多不一致性，并且还提供了许多方便的实用程序，例如用于连接事件处理程序的方法，以处理浏览器之间的差异。大多数库还提供了一种设置函数（例如pageInit）的方式，以在DOM准备好操作之前运行，这比window的load事件要早得多。

将其更改为type="button"或在JS函数中加入return false;

：我想我还是坚持使用submit，因为这只是一个实验性的练习。我将进行一些使用submit的项目，所以最好习惯于使用它...不过还是谢谢你的建议。

：我添加了一些进一步的说明。

为什么不只是使用elem.remove()？

return false是什么意思？

：实际上，我可能不应该在上面使用return false，因为发生的情况会根据函数的连接方式而有所不同。细节请参阅：[关于return false的故事](http://blog.niftysnippets.org/2011/11/story-on-return-false.html)。

J.Crowder，您能告诉我为什么以及如何使用新的设置事件处理程序的方式比旧的onXYZ()属性方法更好吗？例如，在旧的方式下，只需使用检查元素，我就可以看到单击按钮调用了"removeDummy()"函数，因此更容易理解代码的流程。在新的方法中，我必须打开javascript文件并通过元素的ID"btnRemoveDummy"搜索，才能找出哪些事件侦听器正在处理它，以及它们调用的函数以及顺序。对我来说，这使理解代码的流程变得复杂了。

- 有几种方式：1.您从属性样式处理程序调用的任何函数都必须是全局函数，全局命名空间已经非常拥挤，很容易选择与其他内容冲突的函数名称（可以使用对象和一个可能唯一的名称将所有处理程序放在上面来解决此问题）。2.使用旧的属性样式方式（或在元素上分配onxyz属性）只允许一个处理程序，如果分配给属性，则替换以前存在的内容，因此与其他内容不兼容。（续）

（继续）也有一派人认为这样混合代码和标记是一个坏主意，但是最近几年出现了一些框架/库，例如React、Angular、Marko、Knockout等，它们进行了类似的操作（但是没有旧的属性处理程序的问题）。因此，对我来说，这个论点的分量较小，但对一些人来说，它仍然很重要。

0