Search jQuery

jQuery Forum

data attribute

in Using jQuery • 8 years ago

hey guys im trying to get the value of a data attribute now ive tried different way but im not having no luck.

can you please tell me where im going wrong

$(document).ready(function() {
    var specific_count = 0;
    var specific_id    = 0

    $('#add_specific').click(function(){
        $('#specifics').append('<li id="specific_' + specific_id + '"><input type="text" class="code" name="SpecificLabel[]" value="" placeholder="Label" /> <input type="text" class="code" name="SpecificData[]" value="" placeholder="Data" /><button class="remove_specific" data-specific-id="' + specific_id + '"><strong>-</strong></button></li>');
        specific_count++;
        specific_id++;
    });

    $('#specifics').on('click', '.remove_specific', function(event){
        var id = $(this).data("specific-id");   // problem here
        console.log(id);
        //$('#specific_' + id).remove();
        //specific_count--;
    });
});

ive tried

var id = $(event).data("specific-id");

and

var id = $(event.target).data("specific-id");

thank you

Replies(6)

jakecigar

Re: data attribute

8 years ago

var id =$(this).closest("li").attr("id");

It is already the id of the li.

JΛ̊KE

watusiware

Re: data attribute

8 years ago

But this code *ought* to work, unless I have missed something.

As well, the ID attribute isn't quite the same. It has "specific_" pasted onto the front of it. The data-specific-id attribute is just the number itself.

It's hard to tell without seeing an actual demo. It's quite possible the problem lies outside of the little snippet of code you have shown.

But.... all those number-appended IDs raise a red flag for me. There is almost always a better and less convoluted way of solving these kinds of problems. Will you actually use those IDs? If so, how?

I never go to all this pain to create a bunch of IDs with numbers appended, because it is asking for trouble! It only causes even more pain!

If you will use them to search the DOM, there are better ways.

If you tell us how (or if) you will use those IDs, we can help you do it a better way.

Sµßhrånil∂

As Jon said id will create problem for you.

Think you have 4 lis with id like specific_0, specific_1, specific_2, specific_4 and two variable values are specific_count = 3, specific_id=3,

Now think you suppose removed li with id specific_2, now you have 3 lis with ids specific_0, specific_1 and specific_3 and two variable values are specific_count = 2, specific_id=2;

Now if you add another element then you will have 4 lis with ids specific_0, specific_1, specific_3, specific_3

As when you removed specific_2 that time you didn't updated the id specific_3 to specific_2 and this will happen when you keep removing and adding again and again and you will end up having repeated ids for more than one elements.

Now if you click on remove button of last li with id specific_3, it will remove first li with id specific_3 as your ids are repeated.

So get rid of ids, you can do it without id very easily like

$(document).ready(function() {
$('#add_specific').click(function(){
$('#specifics').append('<li"><input type="text" class="code" name="SpecificLabel[]" value="" placeholder="Label" /> <input type="text" class="code" name="SpecificData[]" value="" placeholder="Data" /><button class="remove_specific"><strong>-</strong></button></li>');
});
$('#specifics').on('click', '.remove_specific', function(event){
$(this).closest("li").remove();
});
});

watusiware

Re: data attribute

8 years ago

^ Yes, this goes one better than Jake's solution. It skips the whole issue of IDs altogether. Your goal is to remove the closest <li> when you click on the the enclosed button. This small but of code expresses it perfectly and much more simply.

Focus on just what you are trying to accomplish. It's easy to get wound-up in every-more-elaborate solutions to what might really be a simple problem.

jQuery DOM traversal functions are very powerful, and it is worth studying them in some depth. Learn to (quite literally) navigate your way around the DOM - it is easy then once you have "the knowledge".

(Trivia: "the knowledge" is the vast amount of memorization needed by London cabbies in order to get their taxi license... they need to know every street with referring to a map. jQuery's isn't quite so vast - it's a bit easier.)

An ID is like a bookmark. If there are too many bookmarks, they really aren't very useful!

jakecigar

Re: data attribute

8 years ago

Even if you add the stinkin’ ids. I would use Sµßhrånil∂ ’s solution.

Ids are a crutch for the weak. Real programmers use DOM navigation!

JΛ̊KE

destramic

Re: data attribute

8 years ago

wow...well the code jake posted was just what i needed...although my design pattern was out there.
but if it can be done with an id that's great.

i'll change my code to Sµßhrånil∂ 's method...thank you all guys for your help and support

Top Reply

Response title

Attachments

jQuery Forum

data attribute

Replies(6)

Re: data attribute

Re: data attribute

Re: data attribute

Re: data attribute

Re: data attribute

Re: data attribute

Statistics

Tags

Actions

Related Posts