CODEWITHSUNDEEP
javascripthtml
user1134181
user1134181

Reputation:

JavaScript - removing element by part of id

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.

Upvotes: 3

Views: 3840

Answers (7)

Ngoral
Ngoral

Reputation: 4814

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.

Upvotes: 0

naota
naota

Reputation: 4718

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/

Upvotes: 1

Nikita
Nikita

Reputation: 4686

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/

Upvotes: 1

Minko Gechev
Minko Gechev

Reputation: 25682

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/

Upvotes: 6

Mathew Thompson
Mathew Thompson

Reputation: 56429

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/

Upvotes: 3

ddev
ddev

Reputation: 389

with JQuery you can get elements via partial ID

look here for further information.

Upvotes: 0

redwind
redwind

Reputation: 161

you can use jquery selector regex to resolve it :)

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

Upvotes: 1

Related Questions