How to target a data-ref with a specific value and add a style using javascript


I want to target a data-ref with a specific value and add an inline style="display:none;" to it.

How can this be achived? Can someone help me please?

This is how it looks:

<div data="{test-bubble}}" data-ref="bubbles[]" class="bubbles" state="default">

I tried this but it does not work:

var bubbleremoval = document.querySelector('[data-ref="bubbles[]"]') = "none";


"""Your code should work if you are applying to a single element since query selector returns one element but for several elements you could fetch by classname and loop through the elements and remove display for each"""
var bubbleremoval = document.getElementsByClassName('bubbles')
     for (let i = 0; i < bubbleremoval.length; i++) {
        bubbleremoval[i].style.display = "none";

Answered By – Tat

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published