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

Question

I need to select ALL child elements from <div id="VidContainer"> who's ID's pattern is abc- and then a randomly generated number, followed by -container . Ej, "abc-985224562456540-container"

Because the numbers in the middle are randomly generated, a loop won't work. When the numbers have more than 10 digits, JS's engine enters into an "eternal loop" and the browser crashes.

After selecting the elemnets , I need to delete all <div found, with the matching pattern.

What would be the wildcard JavaScript needs to use to select them?
And what would be the best approach to delete those elements?

Dummy 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>

I got most of the code. I just can't find a way to get the child element's 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

You can match both the start and end of an attribute with a CSS selector:

 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> 

Answer 2

You could use querySelectorAll() with the appropriate CSS selector. Not a wildcard solution, but still:

 // 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; } 

 <div id="VidContainer"> ...some more html... <div id="abc-13-container">Text 13 - click text to remove item</div> ...some more html... <div id="abc-9999-container">Text 10 - click text to remove item</div> ...some more html... <div id="abc-21540540640-container">Text 19 - click text to remove item</div> ...some more html... </div> <button id="clearAll">Clear all</button> 

This is a solution that has all the functions for correct removal (one-by-one or all at once).