有没有一种使用Javascript完全删除HTML元素的方法？

Question

是否可以使用Javascript/jQuery/Ajax直接从标记中删除HTML元素，而不是使用CSS display: none？

- ptamzz

---

有点学究，但你并不是从标记中删除它，而是从文档对象模型中删除它。标记只是通过网络传输的文本。 - Neall

Answer 1

是的 JavaScript

var parent = document.getElementById('parentElementID');
var child = document.getElementById('childElementID');
parent.removeChild(child);

jQuery

$('#parentElementID').remove('#childElementID');

- Dustin Laine

---

甚至更简单的是 $('#childElementId').remove()，此代码可以移除指定子元素的HTML标记。 - kapa

同意，希望能更加详细地描述。始终建议尽可能进行重构。 - Dustin Laine

可以使用纯JavaScript进行操作，不需要知道父元素是谁，只需使用child.parentNode.removeChild(child)即可。其中的“vanilla”指的是未经修改或处理的标准版本。 - Andreas

我知道这是一段时间以前的内容，现在有一个新的Vanilla JS .remove()，但它不适用于IE，所以.removechild()是最好的跨浏览器解决方案。我知道最近有一场攻击jQuery的运动，认为它不够好或者是个障碍，但是jQuery让事情变得简单明了。 - ClosDesign

Answer 2

element.parentNode.removeChild(element)

- Quentin

Answer 3

这是一个老问题，所以答案有点过时。以前要删除一个元素，你需要获取父节点和元素，然后使用removeChild()方法，就像其他人建议的那样：

element.parentNode.removeChild(element);    

虽然这样做仍然可以接受，但现在你可以直接删除节点：

document.getElementById('elementId').remove();

document.getElementById('remove-button').addEventListener('click', function() {
    document.getElementById('container').remove();
});

#container {
  width:50px;
  height:50px;
  background-color:#bada55;
}

<div id="container"></div>
<button id="remove-button">Remove</button>

- Matthew Johnson

---

我知道这是一段时间之前的内容，现在Vanilla JS有一个新的 .remove() 方法，我同意这个答案并对其进行了投票。但它在IE上不起作用，所以如果你仍然为某种原因支持IE，那么.removeChild() 是最好的跨浏览器选择。我知道最近有一个批评jQuery的运动，认为它不够好或者是一种阻碍，但是jQuery让跨浏览器支持变得容易。感谢您更新答案。 - ClosDesign

Answer 4

原生JavaScript：

    var toremove = document.getElementById('hd');
    toremove.parentNode.removeChild(toremove);

或者在 jQuery 中只需使用

$('#toremove').remove();

- Arnoud Kooi

Answer 5

是的。您可以使用jQuery remove() API。

- mbreining