JQuery와

Question

을 사용하여 테이블 셀의 일부 요소를 제거 마크 업의 그런 부분을 가지고하는 방법 :

<tr> 
    <td class='a'>data1</td> 
    <td class='a'>data2</td> 
    <td class='a'>data3</td> 
</tr> 

클래스 같은로 3 개 셀에 동적으로 추가 입력이 있습니다 :

가

$("selector").has("selector").find(".a").append("<input 
type='text'/>"); 

그래서 입력은 입력에서 세 개의 열을 만드는 입력을 하나씩 생성합니다. 우리가 입력

작업 방법 (이 테이블 행 아니라) 모든 행을 제거하는 세 가지 행이 예를 들어

?
어떤 아이디어?

Answer 1

이렇게 할 수있는 한 가지 방법은 입력 행 "줄"로 정렬 된 단추가있는 다른 열을 추가하는 것입니다. 버튼을 클릭하면 해당 열에서 색인을 얻은 다음 행의 각 열에서 해당 색인에있는 입력을 찾은 다음 발견 된 입력 및 클릭 된 버튼을 제거합니다. 이 같은

뭔가 :

for (var i = 0; i < 5; i++) { 
 
$("table").has("tr").find(".a").append('<input type="text"/>'); 
 
$("table").has("tr").find(".b").append('<button>X</button>'); 
 
} 
 

 
$(document).on('click', '.b button', function(){ 
 
    var $clickedButton = $(this); 
 
    var $buttons = $clickedButton.parent().find('button'); 
 
    var $tableRow = $clickedButton.closest('tr'); 
 
    var curIndex = $buttons.index($clickedButton); 
 
    $tableRow.find('td').find('input:eq('+curIndex+')').remove(); 
 
    $clickedButton.remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class='a'></td> 
 
    <td class='a'></td> 
 
    <td class='a'></td> 
 
    <td class='b'></td> 
 
    </tr> 
 
</table>