1

Let's say, I've got something like this:

<div id="some_id">
    <img src="url1" id="el_id1" hidden>
    <img src="url2" id="el_id2" hidden>
    <img src="url3" id="el_id3" hidden>
</div>

And now, I need javascript to delete all this "hidden" attributes. I don't know the exact ids, I just know they all begins with prefixes of "el_id". How can I realize it using pure javascript?

sebxx4
  • 29
  • 1
  • 7

2 Answers2

2

So use attribute starts with selector and removeAttribute

var elems = document.querySelectorAll('img[id^="el_"][hidden]');
elems.forEach(function(elem) {
  elem.removeAttribute("hidden");
});
[hidden] { display: none; }
<div id="some_id">
    <img src="url1" id="el_id1" hidden>
    <img src="url2" id="el_id2" hidden>
    <img src="url3" id="el_id3" hidden>
</div>
epascarello
  • 204,599
  • 20
  • 195
  • 236
1

Use document.querySelectorAll with a selector that:

  • Selects all <img> inside <div>
  • Which have an id starting with el_
  • Which have the hidden attribute

Remove hidden from the found elements using removeAttribute()

document.querySelectorAll('div > img[id ^= "el_"][hidden]').forEach(e => e.removeAttribute("hidden"));
<div id="some_id">
    <img src="url1" id="el_id1" hidden>
    <img src="url2" id="el_id2" hidden>
    <img src="url3" id="el_id3" hidden>
    <img src="url3" id="dontdelete">
</div>
0stone0
  • 34,288
  • 4
  • 39
  • 64