jQuery Remove Data Attribute Value Example

jQuery Remove Data Attribute Value Example

jQuery remove data attribute from HTML elements; In this tutorial, you will learn how to remove data attribute value from HTML elements using the jQuery removeData() method.

How to Remove Data Attribute Value in jQuery

Using jQuery removeData() method, you can remove data attributes previously set (all) on HTML elements.

Syntax jQuery removeData() Method

To remove all data attributes or select data attributes values, you can use the following syntax with selectors:

$(selector).removeData(name)

Parameters jQuery removeData() Method

ParameterDescription
nameIt is an Optional parameter. Specifies the name of data attribute to remove.
If no name is specified, this method will remove all stored data attribute from the selected HTML elements

Example 1 – jquery remove data attribute value

See the example for how to remove data attribute in jquery; as shown below:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:2px; color:blue; }
  span { color:red; }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>
<body>

  <div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
  <div>value2 after removal: <span></span></div>

<script>

    $("span:eq(0)").text("" + $("div").data("test1"));
    $("div").data("test1", "VALUE-1");
    $("div").data("test2", "VALUE-2");

    $("span:eq(1)").text("" + $("div").data("test1"));
    $("div").removeData("test1");
    
    $("span:eq(2)").text("" + $("div").data("test1"));
    $("span:eq(3)").text("" + $("div").data("test2"));

</script>

</body>
</html>

Example 2 – jquery remove all data attributes

In jQuery, you can remove all data attributes from an element using the removeData() method. Here’s an example of how you can do it:

// Select the element(s) you want to remove data attributes from
var element = $('#yourElement');

// Remove all data attributes using removeData()
element.removeData();

In this example, $('#yourElement') selects the element with the ID “yourElement”. You can replace it with a different selector based on your needs, such as a class or a different ID.

Recommended jQuery Tutorials

  1. jQuery removeClass & addClass On Button Click By E.g.
  2. To Remove whitespace From String using jQuery
  3. jQuery Get and Set Image Src Example
  4. How to Remove Attribute Of Html Elements In jQuery
  5. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  6. Set data attribute value jquery
  7. jQuery Get Data Text, Id, Attribute Value By Example
  8. jQuery | Event MouseUp () By Example
  9. Event jQuery Mouseleave By Example
  10. jQuery Event Mouseenter Example
  11. Event jQuery MouseOver() & MouseOut By Example
  12. keyup jquery event example
  13. Jquery Click() Event Method with E.g.
  14. Event jQuery. Blur By Example
  15. jQuery form submit event with example
  16. keydown function jQuery
  17. List of jQuery Events Handling Methods with examples
  18. Jquery Selector by .class | name | #id | Elements
  19. How to Get the Current Page URL in jQuery
  20. jQuery Ajax Get() Method Example
  21. get radio button checked value jquery by id, name, class
  22. select multiple class in jquery
  23. How to Checked Unchecked Checkbox Using jQuery

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *