부모 요소 및 모든 자식 제거

Question

그래서 테이블이 있고 단추가 전송되면 테이블에 4 개의 열이있는 행이 추가되고 각 행에 삭제 단추가 추가됩니다. 내 목적은 전체 행을 삭제할 수 있지만 버튼을 누르면 버튼 만 삭제됩니다. 전체 행을 삭제하려면 어떻게해야합니까?

$(this).parent().remove() 

시도했지만 작동하지 않습니다. td가 tr에 직접 들어가서 tr에 액세스하고 삭제해야하지만 행은 여전히 ​​존재합니다.

Answer 1

가장 가까운 tr 요소를 선택하고 바로 가기 부모를 선택하려고합니다. 이벤트 바인딩을 보지 않고는 $(this)이 버튼이고 $(this).parent()은 <td>입니다. 대신 당신이 시도해야합니다 : 당신이 tr>td>button의 특정 계층을 보장 할 수있는 경우,

$(this).closest('tr').remove(); 

을 또는, 당신은 사용할 수 있습니다 : 난 강력하게 후자의 형식을 사용하여을 억제

$(this).parent().parent().remove(); 

, 그것은 단단히 그대로 HTML의 구조와 결합된다. 에

<tr> 
    <td> 
     <button>Example</button> 
    </td> 
</tr> 

나중에 변경 : 당신의 HTML과 같이 밖으로 시작하면

<tr> 
    <td> 
     <div class="wrapper"> 
      <button>Example</button> 
     </div> 
    </td> 
</tr> 

계속 작동합니다 closest('tr')을 사용하지만, 중단됩니다 parent().parent()를 사용하여.

---

이벤트가 발생하지 않는 2 차 문제와 관련이 있습니다. $('.foo button').click(removeRow); (.foo 요소가 table 요소와 일치하는 이벤트)를 바인딩하는 경우 새로 만든 button 요소에는 이벤트가 적용되지 않습니다. 대신 당신은 (당신이 jQuery를 이전 버전 사용하는 경우 또는 단순히 delegate) on의 이벤트 위임 양식을 사용한다 :

$('.foo').on('click', 'button', removeRow); 

이것은 table 요소에 바인딩 이벤트를 저장하는 것, 그리고 때 콜백 호출되면 지정된 이벤트를 트리거 한 요소가 두 번째 인수 (이 경우 'button')에 지정된 선택기와 일치하는지 확인하고 일치하는 요소가있는 지정된 핸들러 (이 경우 removeRow)를 트리거합니다 컨텍스트 (처리기 내에서 this은 여전히 ​​button 요소를 가리 킵니다). 내가 코드를 가정하고

Answer 2

$(this).closest('tr').remove(); 

Answer 3

은 다음과 같습니다

<table> 
    <tr> 
     <td>Column</td> 
     <td><button></button></td> 
    </tr> 
</table> 

그래서, 당신의 $(this).parent()이 <td> 아닌 <tr>입니다. 다른 parent()이 필요합니다 :

$(this).parent().parent().remove();