728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text_container{
background-color: beige;
}
</style>
</head>
<body>
<div id="input_container">
<input type="text" placeholder="문자를 입력해보세요">
<button>입력</button>
</div>
<div id="text_container">
</div>
<script>
// 버튼을 눌렀을 시, 혹은 엔터를 입력했을 시 텍스트 div을 넣어줄부모 컨테이너
let textContainer = document.getElementById('text_container');
//입력 버튼을 가져옴
let inputButton = document.querySelector('button');
//입력 태그(텍스트창)
const inputTag = document.querySelector('input');
// 입력 버튼을 클릭했을 떄 실행할 동작을 설정
inputButton.addEventListener('click', appendText);
//키가 눌렸다가 때졌을 경우 이벤트 등록
inputTag.onkeyup = e => {
// 눌려진 키가 Enter가 아니라면
if(e.key !== 'Enter'){
return; //함수 종료
}
appendText(); //자식으로 텍스트 div를 추가한다
}
// 부모 컨테이너 div 에 자식으로서 텍스트를 추가해주는 함수
function appendText(){
// 현재 부모 컨테이너의 자식 개수를 받아온다.
const chileCount = textContainer.childElementCount;
let div = document.createElement('div');//div 태그를 가진 노드 생성
div.className = '내용';
// text설정한다 -> '행번호 : inputTag의 내용'
// 따라서 -> 'childCount + 1 : inputTag.value'
div.textContent = `${chileCount + 1} : ${inputTag.value}`;//해당 div의 내용을 설정한다.
textContainer.appendChild(div);
//현재 줄에 넣을 삭제버튼 생성
const removeBtn = document.createElement('button');
removeBtn.innerText = '삭제';
div.appendChild(removeBtn);
//삭제 버튼을 눌렀을 때, div 를 제거함
removeBtn.addEventListener('click', () =>{
// 현재 div의 번호를 받아온다.
let divNumber = +div.textContent.split(':')[0];
console.log(divNumber)
// for (let index = divNumber; index < divChildren.length; index++) {
// const element = array[index];
// }
// for (let index = divNumber + 1; index < divChildren.length; index++) {
// // 현재 index의 div가 가지고있는 글자를 전부 가져온다
// let content = divChildren.item(index).innerHTML;
// divChildren.item(index).textContainer = `${index - 1}: ${content.split(':')[1]}`; // 텍스트 내용 부분만 가져온다.(번호뺴고)
// }
// div를 삭제한다.
div.remove();
});
inputTag.value = '';// input태그 내용을 초기화
}
</script>
</body>
</html>
728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| js 시계 + 타이머 만들기 (0) | 2023.01.03 |
|---|---|
| setTimeout / setInterval 사용 요약 (0) | 2023.01.03 |
| addEventListener 활용1 (0) | 2023.01.03 |
| js 기초6 (0) | 2023.01.03 |
| js 기초5 (0) | 2023.01.01 |