Question

我需要从<div id="VidContainer">中选择所有子元素，其ID模式为abc-，然后是一个随机生成的数字，后跟-container。 Ej，"abc-985224562456540-container"

由于中间的数字是随机生成的，因此无法进行循环。当数字的位数超过10位时，JS的引擎将进入“永恒循环”，浏览器崩溃。

JavaScript选择通配符需要使用什么？

虚拟HTML ：

<div id="VidContainer">
  ...some more html...
  <div id="abc-13-container">Text 13</div>
  ...some more html...
  <div id="abc-9999-container">Text 10</div>
  ...some more html...
  <div id="abc-21540540640-container">Text 19</div>
  ...some more html...
</div>

我得到了大部分代码。我只是找不到一种获取子元素ID（wildcard）的方法

//Defind element ID
var elementID = "abc" + wildcard + "-container";
var parent = document.getElementById("VidContainer");

//Selet all elements to be deleted
var elements = document.getElementById(elementID);

// Removes an element from the document
while (elements.length) { parent.parentNode.removeChild(elements[0]); }

Answer 1

您可以将 querySelectorAll（）与相应的CSS选择器一起使用。不是通配符解决方案，但仍然：

import statistics

statistics.mean(your_data_list[-n:])  # n = n newst numbers

// arrow function to get all the elements 
// that are (still) part of the DOM
const getElements = () => {
  return document.querySelectorAll('#VidContainer [id^="abc-"][id$="-container"]')
}
// arrow function to DRY code removal
const remE = e => e.parentNode.removeChild(e)

// adding "self-delete on click" to all appropriate elements
getElements().forEach(e => {
  e.addEventListener('click', function(e) {
    remE(e.target)
  })
})

// adding "delete all appropriate elements on click"
document.getElementById('clearAll').addEventListener('click', function(e) {
  getElements().forEach(e => {
    remE(e)
  })
})

[id^='abc-'][id$='-container'] {
  font-weight: 700;
  cursor: pointer;
}

这是一个解决方案，具有所有正确删除功能（一对一或一次全部删除）。

Answer 2

您可以使用CSS选择器来匹配属性的开头和结尾：

var items = document.querySelectorAll("#VidContainer>[id^=abc-][id$=-container]");

console.log("matching items to delete: ", items.length);
for (let item of items) item.remove();

<div id="VidContainer">
  <div id="abc-13-container">Text 13</div>
  <div id="abc-9999-container">Text 10</div>
  <div id="hithere">Hi There</div>
  <div id="abc-21540540640-container">Text 19</div>
  <div id="something">Something</div>
</div>

JavaScript：使用通配符从PARENT元素中选择所有子元素

2 个答案: