CODEWITHSUNDEEP
javascriptjquery
user3042036
user3042036

Reputation: 325

How do i make jQuery unique ID for div for click event?

I need on selection to append div element to the another div, I have done it, and also every time when I select new selection, it should append new div.

the problem is, those appended div's have same id, so I can not delete particular element. I have made them unique with declaring var and combining id with a string, like : id="add_marke'+selectedKey+'" BUT I cant do something like this jQuery( "#add_marke'+selectedKey+'" ).click(function() {

How can I select ID when I make unique ID?

var selectedKey = jQuery("#model").val();
jQuery('#example').append('' + '<div class="add_marke" id="add_marke' +
  selectedKey + '" >' +
  '   <div class="car_tag"><span  class="lbl"><span id="car_name" class="icon-remove"></span></div> ' +
  '&nbsp' +
  '   <select  name="model_cars" id="model_cars" ><option id="selectModel" name="selectModel" value="all" >Please select </option><option>test</option></select>' +
  '&nbsp' + '</div>');
jQuery("#car_name").click(function() {
  jQuery("#add_marke\\.selectedKey").remove();
});

Upvotes: 1

Views: 2181

Answers (6)

Mindaugas Večkys
Mindaugas Večkys

Reputation: 423

Did you want to do something like this?

http://jsfiddle.net/Wg9FE/1/

var selectedKey = "someId";

jQuery('#example').append('' +
            '<div class="add_marke" id="add_marke'+selectedKey+'" >' +
            '   <div class="car_tag"><span  class="lbl"><div id="car_name" class="icon-remove"></div></div> ' + '&nbsp' +
            '   <select  name="model_cars" id="model_cars" ><option id="selectModel" name="selectModel" value="all" >Please select </option><option>test</option></select>'+ '&nbsp' +
            '</div>');

jQuery( "#car_name" ).click(function() {
             jQuery( "#add_marke" + selectedKey ).remove();
        });

Upvotes: 0

Jagadeesh
Jagadeesh

Reputation: 570

<div class="parentElement">
   <span>jagadeesh</span>
   <span class="icon-remove car-remove"></span>
   <button >Remove</button>
</div>

    $('.car-remove').on('click',function(){
        var mainElement = $(this).closest('.parentElement')
        /// do what ever you want with main element. it selects only current parent
        //element
        mainElement.remove();
    })

Upvotes: 0

Sean Quinn
Sean Quinn

Reputation: 2171

Since an ID must be unique you have one of two options, as I see it:

  1. Appending some sort of counter or numeric identifier to the ID, so you always have a unique ID (e.g., count the number of elements and then attribute your ID as my-id-1, my-id-2, etc.) Here you would have to write the DOM query in such a way that searches only for those IDs which begin with a given pattern, div[id^="my-id-"]
  2. Use a class to identify the object in terms of any interactions you would like to provide for all of these <div> elements which have the same structure. Here, you can query based on a common class, in your case .add_marke.

Upvotes: 0

Kumar M
Kumar M

Reputation: 128

You can use

jQuery( ".icon-remove" ).click(function() {
        jQuery(this).parent().parent().parent().remove();
    });

Upvotes: 0

Raul Rene
Raul Rene

Reputation: 10280

You can add the IDs as you do with a predefined prefix:

... id="add_marke_' + selectedKey + '" ...

And then bind the click with a jQuery selector for all elements that have the ID starting with add_marke_:

$('div[id^="add_marke_"]').click()

Upvotes: 4

Lix
Lix

Reputation: 47996

What you need to do is add the click handler to the class name shared by all of these divs. Once the click handler has been triggered, you can then extract the relevant id of the element and compose a selector from that id.

jQuery( ".class_name" ).click(function() {
  var id = jQuery( this ).attr( "id" );
  jQuery( "#" + id ).remove();
});

Upvotes: 0

Related Questions