[JavaScript][문제해결] Javascript의 select에서 checked인 모든 요소를 삭제하려고 했는데...

Javascript의 select에서 checked인 모든 요소를 삭제하려고 했는데 하나씩 선택 삭제는 잘 작동하는데 둘 이상인 경우 삭제가 아니라 2배로 늘어나는 기적(?)이 일어났다. 처음에는 문자열인 고객사 명만 배열로 관리했는데 인덱스를 찾아 삭제하는 것보다 객체의 키값을 찾아 삭제하는 것이 효과적일 거라는 판단이 들어 배열 내에 객체 형식으로 고객사를 등록했다.

객체의 고유한 키의 값을 사업자 번호로 삼았고 그걸 가지고 checked 된 경우 찾아 삭제하고자 했다. 삭제 방식은 checked 되지 않은 요소(고객사 객체)만 새로운 임시 배열에 push 한 후 기존 고객사 배열에 덮어 버리는 방식을 이용했다. 그랬더니 삭제하려고 했던 요소가 2배로 늘어나버렸다. 정확히는 "checked 된 수 * 요소 수(고객사 객체 수)" 만큼 늘어났다.

이 문제를 해결하기 위해 책도 찾아보고 구글링도 하고 정말 많은 고민을 했다. slice, splice, delete 등등 삭제에 이용 및 응용될만한 함수들도 적용해 보았지만 시원하게 해결되지 않았다. 그러다가 부트캠프에서 단지 checked 여부만 확인하는 객체의 키값(false값을 가지고 있다가 checked 되면 true 값을 가짐)을 추가했던 게 생각났다. 그래서 고객사 객체에 고객사의 정보가 아닌 오로지 삭제 등의 기능에만 이용되는 키값을 추가했다.

그 후로는 문제가 너무나도 쉽게 해결되었다. 단지 조건문을 이용해 isChecked(임의로 정의한 키)의 키가 true인 객체만 골라내면 되었기 때문이다. 사실 이러한 해결 방법은 엑셀에서 수식을 걸 때 종종 이용했던 방식이다. 학생 관리 시트의 예로 한 줄의 레코드에 학생의 정보와 상관없는 필드를 추가하고 그 필드의 값을 이용해 검색 기능을 적용한다던지 했던 기억이 난다. 그래서 드는 생각은 문제가 잘 풀리지 않을 때에는 문제 안에서만 정답을 찾으려 하지 말고 한 걸음 뒤로 물러나 좀 더 넓게 바라볼 수 있어야겠다는 거다!

 

[그림 1] 고객사 관리의 삭제 기능