Question

I have a button that creates a new drop pin. That pin is in a div. It also created a hidden from input to record the position of that pin when it is dragged. In my creation Jquery code I stamp the div for the pin and the input with .data("my_id",pinNumber). PinNumber increments when a new pin is created. This means both the div with the new pin and the input have a data key called my_id with the same value.

When a use clicked delete on a pin, I want it to remove the div and input related to the div. Here’s my delete code.

$(".close").live("click", function() {
  var this_id = $(this).parent("div").data("my_id");
$('div[data:my_id='+this_id+']').remove();

the var this_id is returning the correct pin Id. However I’m running into issues on how to select elements based on data value, not data key.

How do I do this? How would I select all elements or all divs or all inputs, whatever, where data value = a specified value? I’m talking Jquery .data() not HTML data- tags.

PS I’m using live() because these pins are created when the use hits new pin so the DOM element doesn’t exist when the code first goes live. A use could created 30 pins. I need a way, and I think the data() method would work best, for connecting the pin div with the input created. Additionally the .draggable() would then report the UI location to the input with the same data value…. NEED help.

Answer 1

You can use filter() and check the data value in the predicate you specify:

$("div, input").filter(function() {
    return $(this).data("my_id") == this_id;
}).remove();