イベントオブジェクトターゲット練習問題

19765 ワード

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();
    }
}
});
結果:

しかし,このようにコードを記述すると,メモリが多く食べられ,効率が低下する.