js_ex6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>리스트 동적 제어하기</title>
    <script>
        function addList(event) {
            event.preventDefault();
            let list = document.getElementById("list");
            let newItem = document.createElement("li");
            newItem.innerHTML = document.form.item.value +
                    "<span onclick='delList(this)'>X</span>";
            list.appendChild(newItem);
        }

        function delList(obj) {
            let item = obj.parentElement;
            let list = item.parentElement;
            list.removeChild(item);
        }
    </script>
</head>
<body>
    <h3>리스트 동적 제어하기</h3>
    <form action="" name="form">
        <input type="text" name="item">
        <button onclick="addList(event)">추가</button>
    </form>
    <hr>
    <ul id="list">
    </ul>
</body>
</html>