JavaScript 배열 실습 문제 4

- 다음 보기의 문자열을 바탕으로 삭제할 음식과 추가할 음식을 입력받아 지우고, 추가하는 코드를 작성하시오. 
(단, 1개씩 입력)

이 부분에 정답이 출력 될 수 있도록 하세요

<fieldset>
    	<legend>보기</legend>
    	<label id="stringla4">피자 치킨 당근 햄버거 떡볶이</label><br>
	</fieldset>
	<br>
	<input type="text" id="remove" size="25" placeholder="삭제할 음식이름을 입력하세요">
	<input type="text" id="add" size="25" placeholder="추가할 음식이름을 입력하세요">
    <p style="border:1px solid red;" id="print4">이 부분에 정답이 출력 될 수 있도록 하세요</p>
	<button onclick="print2Test();"> 처리 및 출력 </button>  
	
	<script>
		function print2Test(){
			const arr = document.getElementById("stringla4").innerHTML.split(' ');
			
			const remove = document.getElementById("remove").value;
			const add = document.getElementById("add").value;


			for(let i=0; i<arr.length; i++){
				if(arr[i] == remove){
					arr.splice(i, 1);
				}
			}
			arr.push(add);
	
			document.getElementById("print4").innerHTML = arr.join(' ');
		
		}
	</script>

>>  1. label에 있는 문자열 사이의 공백을 기준으로 split으로 나눠 배열에 옮겨담기 
      2. 삭제할 음식과 추가할 음식을 입력받은 값을 변수에 담음
      3. 반복문을 통해 배열에 담긴 값과 입력받은 삭제할 음식이 일치할때 splice 메소드를 통해 삭제
          배열.splice(시작인덱스, 제거수,(추가할값) ) 
     4. 입력받은 추가할 음식은  push메소드를 통해 배열에 추가 
     5. id가 "print4" p태그 영역의 html에 배열을 출력