How to remove data-0 attribute from div?

I have a html code like below.

<div id="asa" class="bg"
    data-0="transform:scale(1, 1); opacity:1"
    data-1000="transform:scale(2, 1); opacity:0.5"
    data-5000="transform:scale(2, 2); opacity:1">   

    //Some Code

</div>

I want to remove 'data-1000' attribute from the div or change 'data-1000' into 'data-2500'. How can I do it? I tried $('#asa').removeAttr('data-1000'); and many more. But they did not work.

Solution

Option 1: Try this code first:

document.getElementById('home_bg1').removeAttribute('data-1000');

Option 2: If the first code doesn't work for you ... try this one

If the element you want to edit is loaded by another script, it is necessary for the editing script to wait. This code waits for an item with the ID #home_bg1 to appear and then executes

var checkEx = setInterval(function () {
    var el = document.getElementById('home_bg1');
    if (el) {
        el.removeAttribute('data-1000');
        clearInterval(checkEx);
    }
}, 100);

Option 3: Waiting for an element to appear in the code that has an attribute named "data-1000" and only then is it executed.

If the element you want to edit is loaded by another script and this script is delayed by setting the "datа" values. Then we have to wait for the "data" attribute to appear and then run the script

    var checkEx = setInterval(function () {
        var el = document.querySelector('[data-1000]');
        if (el) {
            el.removeAttribute('data-1000');
            clearInterval(checkEx);
        }
    }, 100);

Example: Put this script before skrollr.min.js

....

<script>
    document.getElementById('home_bg1').removeAttribute('data-1000');
</script>


<script src="skrollr.min.js"></script>
<script>skrollr.init();</script>

....