[jQuery + Javascript] 목록에 추가, 삭제

[jQuery + Javascript] 활용하여 목록 추가, 삭제 : HTML 붙이기/지우기

 

 

 

1). 이름 입력 시, 리스트(목록) 형태로 아래 나오게 하기

2). 지우기 버튼 클릭 시 모두 삭제하기

 

HTML 붙이기/지우기 코드

<script>
    function q() {
            let txt = $(`#input-q`).val();
            let temp_html = `<li>${txt}</li>`

            $(`#names-q`).append(temp_html)
            	// 이름 입력 시, 리스트(목록) 형태로 아래 나오게 하기
        }

        function q_remove() {
            $(`#names-q`).empty()
            	// 지우기 버튼 클릭 시 모두 삭제
        }

</script>

	<div class="box">
        <h2> HTML 붙이기/지우기 연습</h2>
        <h5>1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>2. 다지우기 버튼을 만들기</h5>
        <input id="input-q" type="text" placeholder="여기 이름을 입력" />
        <button onclick="q()">이름 붙이기</button>
        <button onclick="q_remove()">다 지우기</button>
        <ul id="names-q">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>

 

다 지우기 버튼 클릭 시, 모든 입력 내용 삭제