Remove data attribute on click function using jQuery

Question

Here is the stripped snippet of code I'm having difficulties with to start explaining my question.

Button that triggers function:

 <button id="deleteItem" type="button">Delete</button>

Input field attribute I'm trying to update

<input id="quantity" type="text" name="field" min="1" value="1" data-price="10">

jQuery to process

$(function() {
    // Bind an action to the deleteItem - click event
    $("#deleteItem").on('click', function() {

        var deleteQuantity = document.getElementById("quantity");

        // Add 0 value to the data-price value
        deleteQuantity.data('price','0');

    });
});

When click event is triggered I get this from console.

Uncaught TypeError: deleteQuantity.data is not a function

You're trying to use a jQuery method (.data()) on a plain vanilla JavaScript object deleteQuantity — j08691
– j08691, Commented Jan 13, 2017 at 18:11
You would need something like deleteQuantity.setAttribute('data-price', 0) if you want to use vanilla JS — Ramiz Wachtler
– Ramiz Wachtler, Commented Jan 13, 2017 at 18:13
@sinisake It wasn't actually meant as a comment the OP should follow, just wanted to point it out, so OP also knows the vanilla JS way of doing it. :) I'm totally with you, that it makes not much sense using vanilla JS for this if you already included jQuery. — Ramiz Wachtler
– Ramiz Wachtler, Commented Jan 13, 2017 at 18:17

Nenad Vracar · Accepted Answer · 2017-01-13 18:14:13Z

2

You can select input like this $('input#quantity') and change data-price with attr()

$('#deleteItem').click(function() {
  $('#quantity').attr('data-price', 0)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="deleteItem" type="button">Delete</button>
 <input id="quantity" type="text" name="field" min="1" value="1" data-price="10">

edited Jan 13, 2017 at 18:14

answered Jan 13, 2017 at 18:10

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Heretic Monkey Over a year ago

It is better to not qualify an ID selector; it actually slows down the selection process. A selector with #quantity will use document.getElementById('quantity'), which gets the element immediately. A selector with input#quantity either has to get the element, then check if it's an input, or find all inputs, then check the id on each one...

Nenad Vracar Over a year ago

Yea you are right, also id's must be unique so there is no point.

Dominik Krulak Over a year ago

Well @NenadVracar I've already tried that before but I wasn't getting it. Now I've reproduced it with your answer and still not updating it. There must be something else going on as buttons and inputs are outputted by loop assigned by index number like this deleteItem-0 and quantity-0. I've checked it many times and each delete button updates input field attribute respectively. Because there are other input fields with id selector like price-0 and deleteItem-0 button does the job well.

Collectives™ on Stack Overflow

Remove data attribute on click function using jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related