JavaScript - removing element by part of id

Question

I need remove the <div> element on its id. I know that i can use function such as -

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

But the fact is that the id - composite. It consists of a constant part and part that change in every request. This part is a random set of numbers.

I know, i need to use regular expressions in this case. I would be most grateful for an example.

If you want to use jQuery then use can use this technique: http://stackoverflow.com/questions/5002966/jquery-or-css-selector-select-all-ids-that-start-with — Felix Eve, Dec 19 '12 at 09:47
And you don't have a `className` in order to identify these elements? — Samuel Caillerie, Dec 19 '12 at 09:47

score 6 · Accepted Answer · answered Dec 19 '12 at 09:50

6

Here is how you can do this with pure JavaScript without any libraries:

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

In the example above all div elements which ids start with foo will be removed. Here is an example: http://jsfiddle.net/UemQ5/

answered Dec 19 '12 at 09:50

Minko Gechev

25,304
9
61
68

1

Nice one, I was just about to post something similar just without regex.. [fiddle](http://jsfiddle.net/cmeYx/) – Shadow The GPT Wizard Dec 19 '12 at 09:54
I'm glad that my answer is helpful. Best regards! – Minko Gechev Dec 19 '12 at 14:31

score 3 · Answer 2 · answered Dec 19 '12 at 09:50

You don't have to use a regex, you can use one of these 3 selectors, depending on what you need: starts with, ends with, or contains.

Starts with: $("[id^=item]")

Ends with: $("[id$=item]")

Contains: $("[id*=item]")

Or if they don't suit your needs, there's even more here: http://api.jquery.com/category/selectors/

score 1 · Answer 3 · answered Dec 19 '12 at 09:46

1

you can use jquery selector regex to resolve it :)

read this : http://james.padolsey.com/javascript/regex-selector-for-jquery/

answered Dec 19 '12 at 09:46

redwind

161
1
13

naota · Answer 4 · 2012-12-19T10:40:22.043

1.jQuery Attribute Starts With Selector

On jQuery, "Attribute Starts With Selector" selects elements that have the specified attribute with a value beginning exactly with a given string.

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

If you want to remove the divs which 'id' starts with "ABC_", your code goes something like this:

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

The document is here http://api.jquery.com/attribute-starts-with-selector/

2. jQuery Attribute Ends With Selector

Similarly,"Attribute Ends With Selector" selects elements that have the specified attribute with a value ending exactly with a given string.

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

If you want to remove the divs which 'id' ends with "_ABC", your code goes something like this:

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

The document is here http://api.jquery.com/attribute-ends-with-selector/

3. jQuery Attribute Contains Selector

Lastly,"Attribute Contains Selector" Selects elements that have the specified attribute with a value containing the a given substring.

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

If you want to remove the divs which 'id' contains "ABC", your code goes something like this:

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

The document is here http://api.jquery.com/attribute-contains-selector/

score 1 · Answer 5 · answered Dec 19 '12 at 10:13

I think query selector would be best for you

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/

score 0 · Answer 6 · edited May 23 '17 at 12:22

0

with JQuery you can get elements via partial ID

look here for further information.

edited May 23 '17 at 12:22

Community

1
1

answered Dec 19 '12 at 09:49

t0.

361
2
9

score 0 · Answer 7 · answered Jun 01 '22 at 07:38

In modern JS as by June'22 you can do it with one-liner:

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

Also want to give credit to @Nikita's answer here, 'cause I find it the most accurate and effective of all here.

JavaScript - removing element by part of id

7 Answers7

Linked