클릭 이벤트에 대해 div에 대한 jQuery 고유 ID를 만들려면 어떻게해야합니까?

Question

다른 div에 div 요소를 추가하려면 selection을 사용해야합니다. 새 선택을 선택하면 매번 새로운 div를 추가해야합니다.

문제는 추가 된 div의 ID가 같아 특정 요소를 삭제할 수 없다는 것입니다. 나는 var를 선언하고 ID와 문자열을 결합하는 것과 같이 고유하게 만들었습니다 : id="add_marke'+selectedKey+'" 그러나 이런 일은 할 수 없습니다. jQuery("#add_marke'+selectedKey+'").click(function() {

고유 ID를 만들 때 어떻게 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(); 
}); 

Answer 1

당신은 ID를 추가 할 수 있습니다

을

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

Answer 2

당신이해야 할 일은 모든 div에서 공유하는 클래스 이름에 클릭 핸들러를 추가하는 것입니다. 클릭 핸들러가 트리거되면 요소의 관련 id을 추출하고 id에서 선택기를 작성할 수 있습니다.

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

그리고add_marke_로 시작하는 ID 이 모든 요소에 대한 jQuery를 선택기로 클릭 바인딩 : 미리 정의 된 접두사처럼

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

Answer 3

당신은 사용할 수 있습니다

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

Answer 4

의 ID가 고유해야하기 때문에 당신이 두 가지 옵션 중 하나, 내가 볼과 같이 항상 고유 한 ID를 가지고 있으므로 예를 들어, (즉, ID에 카운터 또는 숫자 식별자의 일종을 덧붙이

1. 을, 요소 수를 계산 한 다음 자신의 ID를 my-id-1, my-id-2 등으로 지정하십시오. 여기서 주어진 패턴으로 시작하는 ID 만 검색하는 방식으로 DOM 쿼리를 작성해야합니다. div[id^="my-id-"]
2. class을 사용하여이 모든 <div> 요소에 대해 제공하려는 상호 작용 측면에서 개체를 식별 할 수 있습니다. 같은 구조. 여기서는 공통된 클래스를 기반으로 문의 할 수 있습니다 (귀하의 경우 .add_marke).

Answer 5

<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(); 
    }) 

Answer 6

당신이 그런 짓을 할나요?

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(); 
     });