0

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";
Jio
  • 49
  • 7
  • 1
    can you explain more, required output – MAYUR SANCHETI Nov 23 '22 at 11:48
  • 1
    Works fine here, https://jsfiddle.net/rscL8o19/ - so you will need to give us a proper [mre] of your issue. – CBroe Nov 23 '22 at 11:50
  • 1
    Might be another possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/q/14028959/1427878) – CBroe Nov 23 '22 at 11:51
  • 1
    This should work fine though – Marios Nov 23 '22 at 11:53
  • After more testing I found out that the problem was coming from something else and not my code. Thank you to everyone for taking the time to respond :) – Jio Nov 25 '22 at 11:06

1 Answers1

1
"""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";
     }
Tat
  • 51
  • 4
  • Thank you for responding! I found out that the problem was related to something else and not my code. – Jio Nov 25 '22 at 11:07