[jQuery] keyup 이벤트를 이용하여 입력 값에 따라 특정 항목 삭제하기

26 Dec 2023

jQuery

사용자가 입력하는 값에 따라 특정 항목을 동적으로 삭제하는 기능을 구현하는 방법을 알아보겠습니다.

HTML

우선 HTML의 구조는 다음과 같이 간단히 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>특정 항목 삭제</title>
</head>
<body>
  <h1>특정 항목 삭제</h1>
  <input type="text" id="inputValue" placeholder="숫자를 입력하세요">
  <ul id="itemList">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
  </ul>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

JavaScript

그리고 JavaScript 파일인 app.js 에서 입력값에 따라 항목을 삭제하는 기능을 구현합니다.

$(document).ready(function() {
  $('#inputValue').on('keyup', function() {
    var value = $(this).val();
    $('#itemList li:contains("' + value + '")').remove();
  });
});

위 코드는 사용자가 입력한 값을 실시간으로 감지하여 해당 값을 포함하는 항목을 찾아 삭제하는 기능을 구현합니다.

이제 웹 페이지를 열고 숫자를 입력하면 해당 숫자를 포함하는 항목들이 실시간으로 삭제되는 것을 확인할 수 있습니다.

이렇게 keyup 이벤트를 이용하여 입력 값에 따라 특정 항목을 삭제할 수 있습니다.

HTML

JavaScript

참고 자료