I want to remove all elements (suppose they're all divs) whose id name contains the string bs. How to do this via javascript regardless of they are nested elements or not? (not jquery)

<div id="new_bs_add"></div>

<div id="bsremove"></div>

<div id="somethingelse"></div>

... and many more

I want to remove all elements (suppose they're all divs) whose id name contains the string bs. How to do this via javascript regardless of they are nested elements or not? (not jquery)

<div id="new_bs_add"></div>

<div id="bsremove"></div>

<div id="somethingelse"></div>

... and many more

• javascript

• Why 'not jquery'? What you are asking for (advanced selection) is one of the core jQuery features. – Devin Burke Commented Mar 26, 2013 at 13:59
• 3 Because it's not applicable in my case. – Adige72 Commented Mar 26, 2013 at 14:00

4 Answers 4

No jQuery, but if there's support for CSS3 selectors you can go for

var rem = document.querySelectorAll("[id*='bs']"), i = 0;
for (; i < rem.length; i++)
    rem[i].parentNode.removeChild(rem[i]);

Otherwise, just go for this slight edit of VisioN's solution:

var divs = document.querySelectorAll("[id]");
for (var i = 0, len = divs.length; i < len; i++) {
    var div = divs[i];
    if (div.id.indexOf("bs") > -1) {
        div.parentNode.removeChild(div);
    }
}

Pure JavaScript:

var divs = document.getElementsByTagName("div");
for (var i = divs.length; i;) {
    var div = divs[--i];
    if (div.id.indexOf("bs") > -1) {
        div.parentNode.removeChild(div);
    }
}

As an example, in jQuery it is one line:

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

DEMO: http://jsfiddle.net/c4ewU/

The most portable method to obtain a list of elements is document.getElementsByTagName. However the resulting list is a live node list which means that if you modify the document, the list changes too!

There are two solutions for this. One is to take a copy of the list:

var nodes = document.getElementsByTagName('div');
var copy = [].slice.call(nodes, 0);   // take a copy

for (var i = 0, n = copy.length; i < n; ++i) {
    var d = copy[i];
    if (d.parentNode && d.id.indexOf('bs') >= 0) {
        d.parentNode.removeChild(d);
    }
}

The second is to either work through the list backwards, or ensure that you don't advance the iterator if you modify the list. This takes the latter approach:

var nodes = document.getElementsByTagName('div');
for (var i = 0; i < nodes.length; /* blank */ ) {
    var d = nodes[i];
    if (d.id.indexOf('bs') >= 0) {
        d.parentNode.removeChild(d);
    } else {
        ++i; // iterate forward
    }
}

try this code first get all elements contain certain text (here 'bs')

var matches = [];
var searchElements = document.getElementsByTagName("body")[0].children;
for(var i = 0; i < searchElements.length; i++) {
  if(searchElements[i].tagName == 'DIV') {
    if(searchElements[i].id.indexOf('bs') != -1) {
       matches.push(searchElements[i]);
    }
  }
}

Then delete them from body of html

for(var i = 0;i<matches.length; i++)
    matches[i].parentNode.removeChild(matches[i]);

If you remove them in the first loop, there will be some tags will not deleted as the children array length is decreased each time you delete a node. So the better way to get them all in an external array and then delete them.