-
[JS/DOM] 바닐라 자바스크립트로 테이블 행 삭제 버튼 구현하기Frontend 2019. 3. 24. 12:40
No. Contents Delete 1 내용1 2 내용1 3 내용1 4 내용1 5 내용1 위와 같은 테이블을 만든 후 Delete버튼 클릭했을 때 해당 행만 삭제하는 간단한 기능을
제이쿼리를 사용하지 않고 순수 자바스크립트로 구현해보려고 한다.
1. 먼저 html과 css 코드는 다음과 같다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #testTable { width: 500px; margin: auto; border-collapse: collapse; } #testTable th, #testTable td { padding: 5px 12px; text-align: center; border: 1px solid #ccc; } #testTable th { background: #eee; } #testTable .btn_delete { padding: 5px 10px; background: #fbdb65; border: none; cursor: pointer; } </style> </head> <body> <table id="testTable"> <colgroup> <col style="width: 10%"> <col style="width: 70%"> <col style="width: 20%"> </colgroup> <thead> <tr> <th>No.</th> <th>Contents</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>내용1</td> <td> <button type="button" class="btn_delete">Delete</button> </td> </tr> <tr> <td>2</td> <td>내용1</td> <td> <button type="button" class="btn_delete">Delete</button> </td> </tr> <tr> <td>3</td> <td>내용1</td> <td> <button type="button" class="btn_delete">Delete</button> </td> </tr> <tr> <td>4</td> <td>내용1</td> <td> <button type="button" class="btn_delete">Delete</button> </td> </tr> <tr> <td>5</td> <td>내용1</td> <td> <button type="button" class="btn_delete">Delete</button> </td> </tr> </tbody> </table> </body> </html>2. 이벤트를 걸 대상인 버튼의 dom을 선택한다.
var eventTarget = document.getElementsByClassName('btn_delete')문제는 btn_delete라는 클래스를 가진 버튼이 5개이기 때문에
dom 5개를 유사배열의 형태로 가지고 온다는 것이다.
그래서 저 eventTarget에 바로 event를 걸어버리면 error가 뜬다.
3. 그래서 for문을 돌려 이벤트를 걸기로 했다.
for (var i=0; i<eventTarget.length; i++) { eventTarget[i].addEventListener('click', function() { console.log('event동작') }) }위와 같이 이벤트를 걸면 5개의 delete 버튼을 각각 클릭했을 때
콘솔창에 'event동작'이란 글자가 잘 출력되는 것을 확인할 수 있다.
4. 이제 삭제할 대상의 부모 dom에서 삭제할 대상을 remove 시켜준다.
for (var i=0; i<eventTarget.length; i++) { eventTarget[i].addEventListener('click', function() { var parent = document.querySelector('#testTable tbody') parent.removeChild(this.parentElement.parentElement) i -- }) }이벤트 내에서의 this는 이벤트가 걸린 주체, 대상을 의미한다.
여기서는 클릭된 버튼 자기 자신을 말한다.
그러니까 클릭된 버튼 자기 자신의 parentElement는 td를 의미하고,
그 td의 parentElement는 tr을 의미한다.
그리고 그 tr의 부모인 tbody는 parent라는 변수에 담는다.
그리고 parent에서 클릭된 버튼의 부모 tr을 remove시켜주면 삭제가 된다.
크롬 브라우저에서는 간단하게 this.parentElement.parentElement.remove()만 써줘도
잘 작동하였으나 익스에서 작동하지 않아 위 방법으로 실행해보니 잘 작동한다.
그리고 여기서 중요한 포인트는 삭제를 시켜줌과 동시에 i--로 i의 개수를 하나씩 줄여준다는 점이다.
테이블의 행이 삭제됨과 동시에 i의 개수도 줄어들어야하기 때문이다.
5. 마지막 행은 삭제하고 싶지 않다면?
var eventTarget = document.getElementsByClassName('btn_delete') for (var i=0; i<eventTarget.length; i++) { eventTarget[i].addEventListener('click', function() { var parent = document.querySelector('#testTable tbody') if ( i > 1 ) { parent.removeChild(this.parentElement.parentElement) i -- } else { alert('마지막 행은 삭제 불가합니다.') } }) }if문으로 i가 1보다 크다면 remove를 실행시키고
i가 1보다 작아지면 '마지막 행은 삭제 불가합니다.'라는 문구를 추가한다.
No. Contents Delete 1 내용1 2 내용1 3 내용1 4 내용1 5 내용1 - 위 테이블의 delete버튼을 클릭해보세요. -
반응형'Frontend' 카테고리의 다른 글
[CSS] :before, :after에 counter()를 사용하여 숫자 리스트 표현하기 (0) 2019.03.24 [JS/DOM] 바닐라 자바스크립트로 select태그 option 동적으로 생성, 삭제하기 / 특정 옵션 선택하기 (2) 2019.03.24 [JS] 자바스크립트에서 ==과 ===의 차이 (0) 2019.02.24 [jQuery] 제이쿼리 5일차 요점정리 (0) 2019.02.17 [jQuery] 제이쿼리 4일차 요점정리 (0) 2019.02.17 COMMENT