<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<h4>요소 삭제하기</h4>
        <ul class="nums">
            <li>1</li>
            <li id="list2">2</li>
            <li>3</li>
        </ul>

        <h5>remove() - 선택한 요소 삭제</h5>
        <button type="button" onclick="removeJs()">js로 삭제</button>
        <button type="button" onclick="removeJquery()">jquery로 삭제</button>

        <h5>empty() - 선택한 요소 자식 모두삭제</h5>
        <button type="button" onclick="emptyJs()">js로 삭제</button>
        <button type="button" onclick="emptyJquery()">jquery로 삭제</button>
//요소 삭제하기

function removeJs() {
    let li = document.querySelector('#list2');
    li.remove();
}
function removeJquery() {
    $('#list2').remove();
}

function emptyJs() {
    let nums = document.querySelector('ul.nums');
    // console.log(nums);
    nums.innerHTML = '';
}
function emptyJquery() {
    $('ul.nums').empty();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.