.html()에서 요소 제외

Question

jquery의 .html()에서 특정 요소 (#add_phone이있는 버튼)를 삭제해야합니다.

그래서 여기 있습니다. 처음에는 필드 (전화 번호) + 선택 (전화 유형) + 버튼 (#add_phone)이 있으며 세 개 모두가 div로 컨테이너로 묶여 있습니다. 버튼을 클릭하면 .html()을 통해 다시 생성됩니다. JS는 다음과 같습니다

$('#add_phone').click(function() { 
    $('div.multiple_number:last').after('<div id="phone_div_id' + phone_div_id + '" class="multiple_number">'+ $('div.multiple_number').html() +'</div>'); 
    ... 
    //append a remove [-] button, etc...  
}); 

을 여기에 HTML의 :

<div class="multiple_number" id="phone_div_id0"> 
    <label>Phone Number(s):</label> 
    <input name="phone" id="phone[]" placeholder="Phone Number"/> 
    <select name="phone_type[]" id="phone_type"> 
     <option value="1">Mobile</option> 
     <option value="2">Home</option> 
     <option Value="3">Office</option> 
     <option Value="3">Fax</option>   
    </select> 
    <input type="button" name="add_phone" class="add_phone_class" id="add_phone" value="ADD MORE" /> 
</div> 

그래서 효과, 내가 형태에 대해 여러 개의 전화 번호를 만드는 오전. 그러나 여기에 문제가 있습니다. 내부는 입력 유형 = "버튼"( #add_phone 버튼)입니다. 그리고 그것을 .html()에서 제외하고 싶습니다. 내가 시도

:

$('div.multiple_number:not(#add_phone)').html() 
$('div.multiple_number:not(input#add_phone)').html() 
$('div.multiple_number:not(#add_phone)').not(#add_phone).html() 
$('div.multiple_number:not(#add_phone)').not(input#add_phone).html() 

대신 ID 이름을 사용하는 클래스 이름 대응. 미적 이유 때문에 #add_phone 버튼을 div 외부에 배치하고 싶지 않습니다.

Answer 1

을 당신이 무엇을 찾고 있는지에 대해 조금 불분명 해요,하지만 난 #add_phone 버튼을 클릭하면, 당신이 원하는 가정 양식을 복제하고 그 아래에 추가하려면 #add_phone 버튼 자체를 제외하고는

그 가정 떨어져 근무, 다음

$('#add_phone').click(function() { 
    var numberForms = $('div.multiple_number'); 
    var newNumberForm = numberForms.eq(0).clone(true); 
    newNumberForm.find('#add_phone').remove(); 
    newNumberForm.attr('id', 'phone_div_id' + numberForms.length); 
    numberForms.last().after(newNumberForm); 
}); 

는 다음 작업을 보여주는 live jsfiddle demo의 작동합니다.

몇 가지 이유로 초기 시도가 작동하지 않았습니다. 주된 하나는 :not() 선택자이고 .not() 메소드는 선택된 요소에서만 작동합니다. 하위 요소를 기준으로 필터링하지 않습니다. 이러한 메서드는 <div class="multiple_number" />을 선택하는 요소의 ID가 add_phone 인 경우에만 작동합니다.

또한 복제 방법으로 .html()을 사용하지 않는 것이 좋습니다. 직접 DOM 조작에 대한 대안으로 문자열 조작을 사용하면 나중에 문제가 발생할 수 있습니다. .html()을 사용하면 새로 만든 DOM 요소에 이벤트 처리기를 다시 바인딩해야합니다. 위에서 제공 한 전략은 복사되는 모든 요소에 대한 이벤트 처리기를 복제하므로 미래 지향적이어야합니다. .html()을 호출 할 때 특정 브라우저가 원본 요소를 정확하게 복제하지 않는 경우도 있습니다. DOM 요소를 문자열로 serialize해야하는 특별한 이유가없는 한이를 피할 수있는 또 다른 이유입니다.

Answer 2

대신을 시도해보십시오

var innerHTML = $("div.multiple_number").html() 
       .replace($("div.multiple_number input#add_phone").html(), ""); 

행운