이벤트 객체 target 연습문제

Seungmin Lim·2022년 1월 24일
0

JavaScript

목록 보기
34/41

HTML

<section id="section1-1">
        <h1>연습문제 1-선택된 레코드 삭제하기:event target</h1>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>작성일</td>
                    <td>작성자</td>
                    <td>조회수</td>
                    <td>관리</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td><a href="1">자바스크립트란..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>2</td>
                    <td><input type="button" class="del-button" value="삭제" /></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="2">유투브에 끌려다니지 않으려고 했는데....ㅜㅜ..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>0</td>
                    <td><input type="button" class="del-button" value="삭제" /></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><a href="3">기본기가 튼튼해야....</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>1</td>
                    <td><input type="button" class="del-button" value="삭제" /></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><a href="4">근데 조회수가 ㅜㅜ..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>0</td>
                    <td><input type="button" class="del-button" value="삭제" /></td>
                </tr>
            </tbody>
        </table>
    </section>
    <hr />

JavaScript

//연습문제 1-선택된 레코드 삭제하기:event target
window.addEventListener("load",function(){
    var section = document.querySelector("#section1-1");
    var delBtns = section.querySelectorAll(".del-button");

    for(var i = 0; i < delBtns.length; i++){
    delBtns[i].onclick = function(e){
        e.target.parentElement.parentElement.remove();
    }
}
});

결과:

하지만, 이런식으로 코드를 작성하게되면 메모리를 많이 먹고 비효율적이라고 한다.

0개의 댓글

관련 채용 정보