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

Issue

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[test-link.com/test]" class="bubbles" state="default">
</div>

I tried this but it does not work:

var bubbleremoval = document.querySelector('[data-ref="bubbles[test-link.com/test]"]')
bubbleremoval.style.display = "none";

Solution

"""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