EN
JavaScript - remove data attribute from HTML element
4
points
In this short article, we would like to show how to remove data-* attribute from any element using JavaScript.
Quick solution:
element.removeAttribute('data-attribute-name');
or:
delete element.dataset.attributeName;
// Hint: camelCase naming convention for data-attribute-name
Practical examples
1. Using removeAttribute() method
data-* attributes are can be removed in the same way as normal attributes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="my-element" data-attribute-name="attribute-value"></div>
<script>
const element = document.querySelector("#my-element");
element.removeAttribute('data-attribute-name'); // <-------------- data attribute removing
console.log(element.outerHTML); // <div id="my-element"></div>
</script>
</body>
</html>
2. Using dataset property
DOM provides dataset property that gives access to data-* attributes collection. data-* attributes names are converted to pascalCase notation and available in JavaScript API. The attribute remove operation can be performed with delete keyword.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="my-element" data-attribute-name="attribute-value"></div>
<script>
const element = document.querySelector("#my-element");
delete element.dataset.attributeName; // <-------------- data attribute removing
console.log(element.outerHTML); // <div id="my-element"></div>
</script>
</body>
</html>