form태그를 사용하다보면 input type="text"를 많이 사용하게 된다.
그런데 필요에 따라서 text박스를 넣고 빼고를 하고싶은데 그것을 만들줄 몰라서 한참을 생각하고 고민했다.
아주 간단한 예시를 들것이고 그것에 세세하게 설명을 할 것이니, 필요한 부분들만 가져가시면 될 듯합니다.
DOM에 대한 설명이 궁금하신분들은 아래 링크를 참조하세요.
meanbymin.tistory.com/61?category=923684
[JavaScript] DOM 문서 객체 모델
문서 객체 모델(Document Object Model) Html문서나 XML문서 등을 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
meanbymin.tistory.com
<!DOCTYPE html>
<html lang="ko">
<head>
<script>
const add_textbox = () => {
const box = document.getElementById("box");
const newP = document.createElement('p');
newP.innerHTML = "<input type='text'> <input type='button' value='삭제' onclick='remove(this)'>";
box.appendChild(newP);
}
const remove = (obj) => {
document.getElementById('box').removeChild(obj.parentNode);
}
</script>
</head>
<body>
<form>
<div id="box">
<input type="text"> <input type="button" value="추가" onclick="add_textbox()">
</div>
</form>
</body>
</html>
필요한 부분들만 세세하게 보도록하자.
먼저 HTML이다.
<form>
먼저 id가 box인 div를 하나 만들어 주었다. DOM에 appendChild라는 것을 사용하기위해 부모요소를 하나 만들어 준 것이다.
<div id="box">
텍스트 박스 만들기 텍스트 박스를 추가할 수 있는 버튼을 만들었고, 클릭(onclick)시 add_textbox()함수가 실행되게 해주었다.
<input type="text"> <input type="button" value="추가" onclick="add_textbox()">
</div>
</form>
HTML은 끝 !
이번엔 script를 보자.
add_textbox 상수를 만들고 화살표 함수를 사용하여 바로 사용되도록 해주었다.
const add_textbox = () => {
아이디가 box인 태그를 box 상수로 지정해준다.
const box = document.getElementById("box");
newP라는 상수를 만드는데 그것은 p태그를 만드는것이다. 이렇게 div 안에 p 태그를 만드는 이유는 나중에 삭제 버튼을 눌렀을때 div라는 부모노드 안에 p태그 자식노드를 지워주기 위함이다.
const newP = document.createElement('p');
newP상수(p태그)에 innerHTML을 쓸건데, p태그 안에 input타입이 들어가는 거다. html코드를 짠다고 생각하면 <p><input type='text'> <input type='button' value='삭제' onclick='remove(this)'></p> 이렇게 되는 것이다.
그리고 삭제버튼을 만들어줄건데 버튼 클릭시 remove라는 함수가 실행되도록 할것이고 함수 안에 this라는 매개변수를 가진다.
this는 자기자신(<input type='button' value='삭제' onclick='remove(this)'>)을 가리킨다.
newP.innerHTML = "<input type='text'> <input type='button' value='삭제' onclick='remove(this)'>";
id가 box인 div태그에 appendChild(새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가합니다.)를 이용해 추가하게된다.
box.appendChild(newP);
}
삭제 버튼에 넣었던 함수를 만들어줄 것인데, remove라는 상수를 만들어놓고
위에서 remove안에 this를 넣어준 것을 obj(object)로 받아온다
const remove = (obj) => {
box라는 태그를 가진 요소에서 removeChild(자식 노드 리스트에서 특정 자식 노드를 제거합니다.)를 사용하는데 특정 자식 노드를 remove함수를 가지고있는 요소의 부모요소 결국은 p태그를 삭제해주는 것이다.
document.getElementById('box').removeChild(obj.parentNode);
}
예시를 복사하여 붙여서 사용해보고 필요한 부분들은 더 추가해서 사용하면 될 것 같네요 :)
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] form태그 action 경로 여러개 만들기 (0) | 2021.04.12 |
|---|---|
| [JavaScript] reduce 함수 (0) | 2021.03.29 |
| [JavaScript] 자바스크립트 정규식 (0) | 2021.01.29 |
| [JavaScript] 이벤트 객체 (0) | 2021.01.25 |
| [JavaScript] DOM 문서 객체 모델 (0) | 2021.01.19 |
댓글