하위 요소 추가/제거

Question

javascript 및 jQuery를 사용하여 기존 요소 <div>에 새로운 요소를 동적으로 추가 및 삭제합니다.

새 요소를 추가해도 잘 작동하지만 '삭제'를 클릭하여 요소를 제거하면 주 컨테이너 객체가 생기고 버튼 내에있는 자식 요소 객체도 존재하고 클릭됩니다.

이제 요소를 삭제하려고 할 때 문제가 발생합니다. 컨트롤을 포함하는 html 테이블 컨트롤까지 개체를 가져 오는 중 테이블을 포함하는 div를 가져 오지 못합니다.

참고 : div에는 하위 div/요소가 포함되어 있습니다.

자바 스크립트

var ab = '<table rules="none" width="100%">'+ 
'<tr>'+ 
'<td class="optHdBg">'+ 
'<a><img src="themes/theme_blog/images/icons/delete.png" name="delete" önclick="javascript:remove_block(this);"/></a>'+ 
'</td></tr></table>'; 

function add() 
{ 
    var lstChild = $("#contControls").children().last(); 
    var containerElement = document.getElementById("contControls"); 
    var newElement = document.createElement("div"); 
    $(newElement).addClass("optionPane"); 
    newElement.innerHTML = ab; 
    document.getElementById("contControls").appendChild(newElement); 
} 

function remove_block(obj) 
{ 
    var mainContainer = $(obj).parents("div #contControls"); 
    var mySelf = obj.parentNode.parentNode.parentNode.parentNode.parentNode; 
    mainContainer.removeChild(mySelf); 
} 

문제는 작동하지 않습니다 때문에 그 삭제 동작으로, 테이블이 포함 된 DIV 컨트롤에 접근하지 않는 mySelf 제어 발생합니다.

html로 코드

<div id="contControls"> 
    <div class="optionPane"> 
    <table rules="none" width="100%"> 
     <tr> 
     <td class="optHdBg"> 
      <a> 
      <img src="themes/theme_blog/images/icons/delete.png" name="delete" önclick="javascript:remove_block(this);"/> 
      </a> 
     </td> 
     </tr> 
    </table> 
    </div> 
</div> 

나는 클래스 optionPane을 갖는 <div> 요소를 얻을 수 아니에요; <table>의 부모를 타겟팅하려고 시도 할 때마다 ID가 contControls 인 <div>이 표시됩니다.

Answer 1

Working Demo

당신이 jQuery를 가져 오는 문제를 통해려고하는 경우에, 당신은뿐만 아니라 그것을 사용할 수 있습니다. 그것은 당신이 달성하려고하는 DOM 조작을 모두 간단하고 코드 (연결에 대한 +를 사용하지 않고 일을 자바 스크립트 문자열이 당신과 같은 여러 줄에 걸쳐 수없는 주) 단순히이 귀결 :

var ab = '<table rules="none" width="100%">' 
+ '<tr><td class="optHdBg"><a>' 
+ '<img src="themes/theme_blog/images/icons/delete.png" name="delete" />' 
+ '</a></td></tr></table>'; 

$(document).ready(function() { 
    $(document).on('click', 'img[name="delete"]', function() { 
     remove_block(this); 
    });   
}); 

function add() { 
    $("<div class='optionPane'></div>").html(ab).appendTo("#contControls"); 
} 

function remove_block(obj) { 
    // remove the entire optionPane <div> 
    $(obj).closest('div.optionPane').remove(); 
}​ 

---

또한, 당신은 (과해야) 당신은 아마 #contControls에 동적 요소를 (추가 중 정적 부모 요소로 document를 대체 할 수 $(document).on('click' 당신은 줄에 점에 유의해야하지만, 나는 당신의 HTML을 볼 수 없습니다); 이벤트가 DOM까지 멀리 버블 할 필요가 없기 때문에 이것은 더 나은 성능을 제공합니다. 당신이 다음 OBJ

당신은 그들이 필요로하는 것을 같은 새로운 라인에서 단지 분할 문자열이 제대로 연결된 할 수 없습니다

$(obj).parent().remove(); 

Answer 2

이 jQuery 코드를

을보십시오 ..