如何从一个类的所有实例中删除所有数据属性

Question

Need to remove all data attributes from .title .

 $('button').on('click', function(){ $('.title').removeAttr('data'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='title' data-w = 960 data-x = 'gold'>lorem</div> <div class='title' data-w = 540 data-x = 'silver'>ipsum</div> <div class='title' data-w = 720 data-x = 'sun'>lorem</div> <br> <button>CLICK</button> 

Doesn't work. Another try:

$('.title').removeAttr('data-w', 'data-x');

Removes only the first one ( data-w )

Any help?

Answer 1

You can get all the keys from data and then remove data-key .

 $('button').on('click', function(){ var keys = Object.keys($("div").data()); keys.forEach(key =>{ $('.title').removeAttr(`data-${key}`); }) console.log(Array.from(document.querySelectorAll('.title'))); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='title' data-w = 960 data-x = 'gold'>lorem</div> <div class='title' data-w = 540 data-x = 'silver'>ipsum</div> <div class='title' data-w = 720 data-x = 'sun'>lorem</div> <br> <button>CLICK</button> 

Answer 2

Check below code.

       $("#button").click(function(){
            $(".title").each(function() {                       
                var titleElement = $(this);
                $.each(titleElement.data(), function(i){
                    titleElement.removeAttr('data-'+i);
                });
            }); 
        });

I have tested it and it is working fine. Check working example: https://codepen.io/rohitmittal/pen/WPdKzj

Answer 3

You can use the following code to accomplish that:

 $('button').on('click', function() { var titleClasses = $('.title'); titleClasses.each(function() { $(this).removeAttr('data-x') .removeAttr('data-w'); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='title' data-w=9 60 data-x='gold'>lorem</div> <div class='title' data-w=5 40 data-x='silver'>ipsum</div> <div class='title' data-w=7 20 data-x='sun'>lorem</div> <br> <button>CLICK</button>