Hide Multiple elements with same id using Attribute Equals Selector in jQuery

Hello friend, in this simple and short I am going to share the information about how you can hide or remove the multiple elements with same id in jQuery using Attribute equals selector.

As you may already know that one HTML document should not contain the multiple elements with same id and you should rather use a same class name for such requirement. But sometimes when markup is getting generated dynamically e.g. in MVC or Backbone then sometimes it is possible that you have multiple HTML elements with same ids.

So when you want to manupulate such element using jQuery, getting that object using ID selector returns only the first element and you end up with some UI related bugs assigned to you. :-)

Suppose there is a HTML code like below, in which we have 4 buttons with same id as "btnOK".

<button id="btnOK">button ok (1st)</button><br/>
<button id="btnOK">button ok (2nd)</button><br/>
<button id="btnOK">button ok (3rd)</button><br/>
<button id="btnOK">button ok (4th)</button><br/>
<hr/>
<br/>
<button id="btnReload">Reload</button><br/><br/>
<button id="btnHideWithID">Hide buttons with ID selector</button><br/><br/>
<button id="btnHideWithAttr">Hide buttons with attribute selector</button>

and I want to hide the buttons with id as "btnOK", so for that I have written a simple jQuery code on click of "btnHideWithID" button as like below,

$("#btnHideWithID").on("click",function(){
   $("#btnOK").hide(); 
});

If you run this HTML, then you will find that clicking on button, only first "btnOK" gets hidden not all, this is because it is not valid mark up having multiple elements with same id due to which jQuery assumes you will have only one element with provided id so it hides only the first one.

But if you have the requirement in which you want to manupulate such multiple elements with same id then you should consider using Attribute Equals Selector like below.

$("#btnHideWithAttr").on("click",function(){
   $("[id='btnOK']").hide(); 
});

It selects all the elements having "id" attribute value as "btnOK".

You can read more about Attribute Equals selector [name="value"] at this link.

Check out the live fiddle below.

Hope you have liked this simple post, If so, do not forget to share it with your tech friends! Thanks!