Delete whose id contains a specific symbol

Question

I decleared a <table> inside my JSP page. Using JavaScript, I want to delete all <tr>s whose id contains ;.

For example:

<tr id=";1234;">
   ...
   ...
</tr>

The entire line must be deleted. Someone can give me a tip?

Those are invalid id attributes, i doubt most browsers will parse them with `;` character, to begin with. — Eduardo Escobar, Sep 19 '17 at 15:35
Your IDs are not valid. https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — E. Maggini, Sep 19 '17 at 15:37
@E.Maggini well, they're valid in [HTML5 standard](https://www.w3.org/TR/html5/dom.html#the-id-attribute), since they don't contain spaces, but if you're talking about backwards compatibility for HTML4, then sure... — Patrick Roberts, Sep 19 '17 at 15:39
By “the entire line” you mean “the entire element”, right? I’m certain, you don’t want code like this: `… `. — Sebastian Simon, Sep 19 '17 at 15:39
Possible duplicate of [JavaScript - removing element by part of id](https://stackoverflow.com/questions/13949470/javascript-removing-element-by-part-of-id) — Sebastian Simon, Sep 19 '17 at 15:42
How about the 's ? Or better ... what is the problem you are trying to solve ? This makes little sense to me, sorry ... — thecarpy, Sep 19 '17 at 15:42
@PatrickRoberts _"I want to delete all ``s"_ Should selector be `tr[id*=";"]`? — guest271314, Sep 19 '17 at 15:42

4castle · Accepted Answer · 2017-09-19T15:51:37.683

1

document.querySelectorAll('tr[id*=";"]').forEach(node => node.remove());

<table>
  <tr id=";1234;">
    <td>Remove Me</td>
  </tr>
  <tr>
    <td>Keep Me</td>
  </tr>
</table>

edited Sep 19 '17 at 15:51

answered Sep 19 '17 at 15:43

4castle

28,713
8
60
94

score 1 · Answer 2 · answered Sep 19 '17 at 15:44

1

You can programmatically remove all <tr> elements with an id containing a ; by executing the following snippet:

Array.from(document.querySelectorAll('tr[id*=";"]')).forEach(tr => {
  tr.remove()
})

Following links for reference:

answered Sep 19 '17 at 15:44

Patrick Roberts

40,065
5
74
116

1

Note, `.forEach()` can be chained to `.querySelectorAll()` https://stackoverflow.com/questions/36108712/foreach-method-of-node-childnodes – guest271314 Sep 19 '17 at 15:49
This is ECMA6 specific, no? – E. Maggini Sep 19 '17 at 15:52
1

@E.Maggini It is, but only IE doesn't support it, and for that you can use a [transpiler](https://babeljs.io/). – 4castle Sep 19 '17 at 15:56

E. Maggini · Answer 3 · 2017-09-19T16:45:12.183

0

The EASIEST way to do this is as follows AND is cross-browser (non-ECMA6) compatible.

https://jsfiddle.net/dfju8xn8/1/

<table>
<tr id=";1234;">
<td>foo</td>
</tr>

<tr id="yadayada">
<td>moo</td>
</tr>
</table>

and Javascript

var myElements = document.querySelectorAll('tr[id*=";"]');

for (var xx = 0; xx < myElements.length; xx++) {
   myElements[xx].outerHTML ='';
}

p.s. For readability sake, you should use one of the methods above. If you are going to have to iterate over a large result set, consider that for loops are tested as executing faster.

edited Sep 19 '17 at 16:45

answered Sep 19 '17 at 15:46

E. Maggini

7,228
5
23
36

`myElements[xx].parentNode.removeChild(myElements[xx]);` is better. – Sebastian Simon Sep 19 '17 at 17:42
@Xufox Could you explain why, please? Yours requires a call to the parent node, followed by a function call. Mine wipes the desired chunk of HTML directly. – E. Maggini Sep 19 '17 at 18:14
1

Setting `innerHTML` or `outerHTML` isn’t just a simple string operation or property access. There’s lots of DOM-reparsing happening after that which is probably slower than a simple DOM node removal. There’s also the possible issue of [accidentally killing event listeners](https://stackoverflow.com/q/5113105/4642212). You _could_ also use `myElements[xx].remove()`, but you were talking about cross-browser compatibility. `outerHTML` actually has compatibility issues of its own and `remove` or `removeChild` is a much more intuitive method for what is being done here. – Sebastian Simon Sep 19 '17 at 18:24
Thanks for the clarification :) – E. Maggini Sep 19 '17 at 19:42

Delete whose id contains a specific symbol

3 Answers3