Question

需要从data删除所有 .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>

不起作用。另一种尝试：

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

仅删除第一个（data-w）

有帮助吗？

Answer 1

您可以从数据中获取所有keys，然后删除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

检查以下代码。

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

我已经对其进行了测试，并且工作正常。检查工作示例：https://codepen.io/rohitmittal/pen/WPdKzj

Answer 3

您可以使用以下代码来完成该操作：

$('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>

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

3 个答案: