Question

아래 코드는 4 가지 특정 태그를 포함합니다. <div id="0"> 변화가 "나는"add_more "

그리고에 대한 자바 스크립트에서 언급 한 스크립트에서 일을 소중히하는 라인 5 위의 코드에서

<div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'> 
      &nbsp;&nbsp;Delegate(s) details: </div> 
      <div style="border:1px solid black;"><br/> 
      <div id="delegates"> 
      <div id="0"> 
      &nbsp;&nbsp; Name of the Delegate: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <input name='contact_person[]' type='text' size="50" maxlength="50" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      Designation: 
      <select name='delegate_type_name[]' class='delegate_type'> 
      <option value='select'>Select</option> 
      <option value='Main'>Main</option> 
      </select> 
      </div><br/> 
      </div> 
      <div> 
      &nbsp;&nbsp; 
<input type="button" name="more" value="Add More Delegates" id="add_more" /> 
      <br /> 
      <br /> 
      </div> 
      </div> 

: 이미지-1 여기 코드입니다 I는 임시 변수 +

,174,515에서 제거 버튼을 추가 한 상기 add_more "는 자바 코드에

jQuery('#add_more').click(function(){ 
     var id = jQuery('#delegates > div:last').attr('id'); 
     var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'>&nbsp;&nbsp; Name of the Delegate: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' size='50' maxlength='50' name='contact_person[]' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Designation:"; 
     temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' name='rem' value='Remove' id='remove' /></div><br/>"; 
     jQuery('#delegates').append(temp); 
    }); 

이하 주어진다

<input type='button' name='rem' value='Remove' id='remove' /> 

이미지 -2는 "위임자 추가"버튼을 클릭 할 때마다 제거 버튼을 보여줍니다. 이미지 -2에서 추가 위임자 추가 버튼을 클릭하면 드롭 다운 선택 목록의 오른쪽에있는 "제거"버튼이 표시됩니다.

제거 버튼에 대한 jQuery 기능이 필요하므로 제거를 클릭하면 <div id="1">을 제거하고 div 태그를 제거하기 전에 내용을 재설정해야합니다. 이미지 -3 아래는 제거 버튼을 클릭 할 때 원하는 출력입니다. 내가 시도 일부 참조에서이이었다

코드는이

jQuery('#remove').click(function(){ 
     var id = jQuery('#delegates > div:last').attr('id').remove(); 
    }); 

하지만 행운이다.

감사합니다.

Answer 1

처음에는 마크 업이 엉망입니다. 레이아웃 목적으로  을 사용해야하는 방법은 없습니다. 표가없는 레이아웃 및 CSS를 읽어보십시오.

우선 이 필요합니다. 변경하려면이 필요합니다. div의 ID입니다. ID는 숫자로 시작할 수 없습니다. 첫 번째 div delegate0의 이름을 지정하는 것이 좋습니다. 둘째, 동일한 새 행에 모두 제거 단추를 추가합니다. id - 페이지의 모든 ID는 고유해야하므로이 값을 class="remove"으로 변경하는 것이 좋습니다. 귀하의 질문에 관해서는

, 그것은 정말 .live ^docs 방법을 사용하여 삭제 버튼에 jQuery를 처리기를 추가 할 필요가 아래로 비등. 또한

jQuery('.remove').live('click',function(){ 
    $(this).closest('div').remove(); 
}); 

, 당신은 새로운 행이 추가되고이 때마다 항목 추가의 ID의 실행 카운터를 유지하고 증가해야합니다으로

이것은 간단합니다.

var nextDelegate = 1; 
jQuery('#add_more').click(function(){ 
    ... your code here 
    nextDelegate++; 
}); 

또한 각 div 후에 불필요한 <br/>을 제거했습니다.

라이브 예 : http://jsfiddle.net/cb4xQ/

Answer 2

숫자 만있는 요소 ID를 부여 할 수는 없으며 번호가 아닌 문자로 시작하는 # mydiv1, # mydiv2 또는 유사해야합니다.