jQuery에는 요소를 삭제하는 remove와 empty가 있다.
remove
$('tbody tr').eq(1).remove();위의 스크립트는 tbody에 있는 tr태그 중 1번째 요소 자체를 삭제한다는 것이다.
empty
$('tbody tr').eq(0).empty();empty는 태그 자체를 삭제하지 않고 태그안에 있는 내용을 전부 삭제한다.
예제 소스
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<table border="1">
<colgroup>
<col width="200"><col width="200"><col width="200"><col width="200">
</colgroup>
<thead>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<button type="bytton" id="btn1">empty</button>
<button type="bytton" id="btn2">remove</button>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
$('tbody tr').eq(0).empty();
});
$('#btn2').click(function(){
$('tbody tr').eq(1).remove();
});
});
</script>
</body>
'프로그래밍 > jQuery & javaScript' 카테고리의 다른 글
| [jQuery] 동적 태그에 이벤트 등록 (0) | 2019.10.28 |
|---|---|
| [jQuery] CSS 추가, 삭제, 변경 (0) | 2019.10.28 |
| [jQuery] html 동적 태그 추가하기 (2) | 2019.09.10 |
| 자바스크립트 날짜 계산(년, 월, 일, 시, 분, 초) (0) | 2019.08.22 |
| jqGrid 사용 예제 (v5.3.2, v4.4.3) (2) | 2019.07.17 |
