JavaScript - 根据id部分删除元素

Question

我需要删除具有特定 id 的 <div> 元素。我知道可以使用以下函数-

function removeElement(div_id) {
   var div = document.getElementById(div_id);
   element.parentNode.removeChild(div);
}

事实上，id是一个复合id。它由一个常量部分和一个在每个请求中都会变化的部分组成。这一部分是一组随机数字。

我知道，在这种情况下需要使用正则表达式。如果您能提供一个例子，我将不胜感激。

- user1134181

---

如果您想使用jQuery，则可以使用以下技巧：https://dev59.com/d2445IYBdhLWcg3wLXIK - Felix Eve

你没有className来识别这些元素吗？ - Samuel Caillerie

Answer 1

以下是如何使用纯JavaScript而不需要任何库来完成此操作：

var divs = document.getElementsByTagName('div'),
    forEach = Array.prototype.forEach,
    regex = /^foo.*$/;

forEach.call(divs, function (d) {
    if (d.id !== undefined && regex.test(d.id)) {
        d.parentNode.removeChild(d);
    }
});​

在上面的示例中，所有以foo开头的div元素都将被移除。 以下是一个示例：http://jsfiddle.net/UemQ5/。

- Minko Gechev

---

不错，我正想发布类似的内容，只是没有使用正则表达式.. fiddle - Shadow The Spring Wizard

我很高兴我的回答对您有所帮助。最好的祝福！ - Minko Gechev

Answer 2

您不必使用正则表达式，可以使用以下三个选择器之一，具体取决于您的需要：以…开始、以…结束或包含。

以…开始：$("[id^=item]")

以…结束：$("[id$=item]")

包含：$("[id*=item]")

如果它们不能满足您的需求，则在此处还有更多内容：http://api.jquery.com/category/selectors/

- mattytommo

Answer 3

你可以使用jQuery选择器正则表达式来解决它 :)

阅读这篇文章： http://james.padolsey.com/javascript/regex-selector-for-jquery/

- redwind

Answer 4

1. jQuery属性开始选择器

在jQuery中，"属性开始选择器"可以选择具有指定属性且值以给定字符串开头的元素。

  jQuery('[attribute^="value"]')

如果您想要删除'id'以"ABC_"开头的div，您的代码应该像这样：

  $('div[id^="ABC_"]').remove();

文档在这里 http://api.jquery.com/attribute-starts-with-selector/

2. jQuery 属性结尾选择器

类似地，“属性结尾选择器”选取具有指定属性且属性值以给定字符串结尾的元素。

  jQuery('[attribute$="value"]')

如果您想要删除'id'以"_ABC"结尾的div，您的代码应该如下所示：

  $('div[id$="_ABC"]').remove();

这里是文档 http://api.jquery.com/attribute-ends-with-selector/

3. jQuery 属性包含选择器

最后，"属性包含选择器" 选择具有包含给定子字符串的指定属性值的元素。

  jQuery('[attribute*="value"]')

如果您想要删除包含“ABC” ID的div，您的代码应该如下所示：

  $('div[id*="ABC"]').remove();

文件在这里 http://api.jquery.com/attribute-contains-selector/

- naota

Answer 5

我认为查询选择器对你来说是最好的选择

function myFunction()
{

var matchedElements = document.querySelectorAll("#myContainer div[id^='prefix']");

var forEach = Array.prototype.forEach;

forEach.call(matchedElements, function (el) { el.parentNode.removeChild(el); } );

}

http://jsfiddle.net/KLVP5/1/

- Nikita

Answer 6

使用JQuery，您可以通过部分ID获取元素

请在此处查看更多信息。

- t0.

Answer 7

在现代JS中，截至2022年6月，您可以使用一行代码完成它：

document.querySelectorAll("div[id^='myPrefix']").forEach((element) => { element.remove() })

同时也要感谢@Nikita的答案，因为我认为它是所有答案中最准确和有效的。

- Ngoral