JavaScript를 사용하여 추가된 목록 항목을 삭제하는 방법은 무엇입니까?

HTML에서 개발자는 "ul" 태그를 사용하여 항목 목록을 만들 수 있습니다. 모든 관련 항목을 단일 목록에 추가할 수 있습니다. JavaScript를 사용하여 목록 항목을 관리할 수도 있습니다.

때때로 개발자는 JavaScript를 사용하여 목록 항목을 추가하거나 제거해야 합니다. 특정 속성 값을 사용하여 목록 항목에 액세스하고, Removechild() 메서드를 사용하여 목록 항목을 제거할 수 있습니다.

이 튜토리얼에서는 사용자의 입력을 받아 값에 따라 목록 항목을 제거합니다.

문법

사용자는 다음 구문에 따라 javaScript를 사용하여 추가된 목록 항목을 삭제할 수 있습니다

으아아아

위 구문에서는 id를 사용하여 목록 항목에 액세스합니다. 그런 다음, Removechild() 메소드를 사용하여 선택한 목록 항목을 목록에서 제거합니다.

예 1(목록에서 동적 요소 제거)

아래 예에서는 ID가 "cars"인 목록을 만듭니다. 또한 사용자로부터 목록 항목의 값을 가져오기 위해 입력 상자를 만들었습니다. 또한 사용자가 해당 버튼을 클릭하면 addCar() 및 RemoveCar() 함수를 호출하는 자동차 추가 및 자동차 제거 버튼을 만들었습니다.

JavaScript에서는 목록 및 텍스트 입력 값에 액세스합니다. addCar() 함수에서는 먼저 목록 항목을 생성한 다음 목록 항목의 ID를 설정합니다. 다음으로 텍스트 노드를 생성하고 이를 목록 항목에 추가한 다음,appendchild() 메서드를 사용하여 목록 항목을 목록에 추가합니다.

으아아아

예 2(목록에서 마지막 요소 제거)

아래 예에서는 JavaScript를 사용하여 목록의 마지막 목록 항목을 제거합니다. 이 예는 마지막 목록 항목을 제거하고 첫 번째 예에서 동적 목록 항목을 제거한다는 점을 제외하면 첫 번째 예와 매우 유사합니다.

removeCar() 함수에서는 'lastElementChild' 속성을 사용하여 목록의 마지막 하위 요소를 가져옵니다. 그런 다음 마지막 요소가 있으면 제거합니다.

출력에서 사용자는 목록에 여러 항목을 추가하고 삭제 버튼을 클릭하여 목록 요소를 삭제할 수 있습니다.

으아아아

예 3

아래 예에서는 JavaScript를 사용하여 모든 목록 항목을 삭제합니다. 여기서는 프로젝트 목록을 생성합니다.

JavaScript에서는 항목을 추가하는 addItem() 함수와 목록에서 모든 항목을 제거하는clearAll() 함수를 정의했습니다. ClearAll() 함수에서는 "firstchild" 속성을 사용하여 목록의 첫 번째 자식을 가져오고, 제거 차일드() 메서드를 사용하여 자식을 제거합니다. while 루프를 사용하여 목록의 모든 하위 항목이 제거될 때까지 반복합니다.

출력에서 사용자는 모두 지우기 버튼을 눌러 목록의 모든 항목을 제거할 수 있습니다.

으아아아

결론

사용자는 목록에서 동적 항목을 제거하는 방법을 배웠습니다. 기본 접근 방식은 각 목록 항목에 동적 목록 항목에 액세스하고 삭제하기 위한 고유 식별자가 있어야 한다는 것입니다. 여기서는 목록 항목 값을 식별자 자체의 ID로 사용합니다.

두 번째 예에서는 목록의 마지막 하위 요소만 제거하고, 세 번째 예에서는 모든 목록 항목을 함께 제거합니다.

위 내용은 JavaScript를 사용하여 추가된 목록 항목을 삭제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!