按照id删除元素

21 浏览
0 Comments

按照id删除元素

使用标准JavaScript删除元素时，必须先访问其父节点：\n

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

\n对我来说，先访问父节点似乎有点奇怪，JavaScript为什么会这样工作呢？

0

3 答案

0 Comments

从以上内容中可以得出，用户想要实现通过id删除元素的功能。下面是解决这个问题的原因和方法：

原因：

- 用户希望通过id删除元素，但是每次都需要写一大段代码来实现，繁琐且容易出错。

- 用户希望避免全局变量，希望函数内部可以引用自身。

解决方法：

- 创建一个名为removeElement的函数，参数为id。

- 函数内部通过document.getElementById(id)获取到对应id的元素。

- 使用parentNode.removeChild(elem)来删除该元素。

- 返回被删除的元素。

代码示例：

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

如果想要更简洁的写法，可以将elem改为remove.elem，这样函数内部引用自身，避免了创建另一个全局变量。

代码示例：

function removeElement(id) {
    var remove = {
        elem: document.getElementById(id)
    };
    return remove.elem.parentNode.removeChild(remove.elem);
}

也有其他用户提出的解决方法，例如：

- 直接在函数内部使用document.getElementById(id)来删除元素。

- 将元素本身作为参数传递给函数，这样函数内部可以直接使用该元素。

代码示例：

function remove(id) {
    document.getElementById(id).parentNode.removeChild(document.getElementById(id));
}

尽管这种方法看起来更直观，但是它执行了两次DOM查找，速度较慢，与其他解决方法相比并不理想。

另外，还有用户指出，上述方法可能会导致内存泄漏问题，因为在删除元素后仍然保留了对已删除元素的引用。为了避免这个问题，可以将变量设置为null。

以上是通过id删除元素的问题的原因和解决方法。

0
0 Comments

在上述内容中，我们可以看到有关如何通过id删除元素的讨论。下面是问题的出现原因和解决方法的整理。

问题出现的原因：

- 在JavaScript中，我们经常需要删除特定id的元素。然而，删除元素的方法并不像我们期望的那样直接。

- 在代码中提到的delete element并不能实现删除元素的功能，因为在JavaScript中，我们只能删除对象的键，而无法删除变量本身。

解决方法：

- 一种简单、可靠且快速的解决方法是使用outerHTML属性来删除元素。只需将document.getElementById("element-id").outerHTML = "";添加到代码中即可。

- 需要注意的是，outerHTML属性是HTML标准中较新的一个添加。如果你需要在当前时间的任何软件中获得支持，你可能需要另一种解决方法。

- 另外一种常见的解决方法是使用removeChild函数来删除元素。这种方法可能会稍微慢一些，大约比使用outerHTML属性慢6-7%。

通过上述内容，我们了解到了如何通过id删除元素的问题以及解决方法。使用outerHTML属性和removeChild函数是两种常见的解决方法。在实际应用中，我们可以根据具体情况选择合适的方法来删除元素。

0
0 Comments

从上述内容中可以整理出以下原因和解决方法：

问题出现的原因：

- 需要通过id或class选择器来删除DOM元素。

- 原生的DOM函数在某些情况下不适用，需要进行扩展。

解决方法：

- 通过扩展Element.prototype.remove函数，可以删除指定id的元素。

- 通过扩展NodeList.prototype.remove和HTMLCollection.prototype.remove函数，可以删除指定class的元素。

- 在现代浏览器中，可以使用document.getElementById("my-element").remove()来删除指定id的元素。

- 在现代浏览器中，可以使用[...document.getElementsByClassName("my-elements")].map(n => n && n.remove())来删除指定class的元素。

- 这些函数在现代浏览器中都可用，但不适用于IE浏览器。

文章整理如下：

在现代浏览器中，我们可以通过扩展原生的DOM函数来删除指定id或class的DOM元素。虽然这种方法并不总是最佳或最常用的解决方案，但在现代浏览器中仍然有效。

我们可以通过扩展Element.prototype.remove函数来删除指定id的元素，代码如下：

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}

同样地，我们可以通过扩展NodeList.prototype.remove和HTMLCollection.prototype.remove函数来删除指定class的元素，代码如下：

NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

使用这些扩展函数，我们可以通过以下方式来删除元素：

document.getElementById("my-element").remove();

或者

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

需要注意的是，这些解决方案不适用于IE 7及以下版本。如果想要了解更多有关扩展DOM的信息，请参考此文章。

编辑：在2019年的回顾中，我们发现node.remove()方法可以用来替代上述的polyfill，代码如下：

document.getElementById("my-element").remove();

或者

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

这些函数在所有现代浏览器中都可用（不适用于IE）。更多信息请参考MDN。

总之，通过扩展原生的DOM函数，我们可以方便地删除指定id或class的DOM元素。这在一些特定的应用场景中非常有用，比如在使用DHTMLX套件或实现AJAX时，可以通过这种方式来删除先前加载的表单，确保只加载当前表单。

0