[jQuery]ul안쪽의 li태그의 동적 추가(append) 및 삭제(remove)

원주남자
포로그래밍/jQuery
2019. 7. 8.

안녕하세요? 원주남자입니다.

오늘은 네비게이션이나 메뉴, 리스트상에서 많이 사용하는 li태그를 동적으로 추가하고 삭제해보겠습니다.

<!doctype html>
<html lang="en">
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
	
 </style>
  <meta charset="UTF-8">
  <title>페이지</title>
 </head>
 <body>
<ul id="ul_list">
	<li>사과</li>
	<li>바나나</li>
	<li>오렌지</li>
	<li>딸기</li>
	<li>망고</li>
<ul>
 </body>
</html>

ul태그안에 li태그들이 구성된 코드입니다. 과일5개를 미리 정의해두었습니다. ㅎㅎ

뭔가 동적으로 넣어주려면? 추가할 아이템을 넣을 입력창과 버튼정도는 넣어두어야겠죠 ㅎㅎ?

<!doctype html>
<html lang="en">
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
	
 </style>
 <script>
function action_add(){
	var text_add = $("#text_add").val(); //입력할 글씨
	var ul_list = $("#ul_list"); //ul_list선언
	ul_list.append("<li>"+text_add+"</li>"); //ul_list안쪽에 li추가
}
 </script>
  <meta charset="UTF-8">
  <title>페이지</title>
 </head>
 <body>
 
<input type="text" id="text_add"/>
<input type="button" id="btn_add" onclick="action_add()" value="추가"/>
<ul id="ul_list">
	<li>사과</li>
	<li>바나나</li>
	<li>오렌지</li>
	<li>딸기</li>
	<li>망고</li>
<ul>

 </body>
</html>

기존 ul태그 위쪽에 택스트입력창과 버튼을 추가해주었구요~

버튼에는 action_add()라는 함수를 연결시켜주었습니다.

위쪽 action_add라는 함수는 주석으로 입력한대로 입력한 글씨값을 받아오고 ul태그의 객체를 선언하였습니다.

그리고 제일 중요한 ul객체에 append()라는 메소드를 사용하여 li를 추가하는 것을 볼수있습니다.

append()는 해당태그에 제일 마지막에 추가하는 것이 특징입니다~

사과를 한번 더 추가시켜줘보겟습니다.

이런 결과를 볼수가 있네요 ㅎㅎ

이번에는 remove()메소드를 사용하여 li태그를 동적으로 삭제해보겠습니다.

li태그마다 id값이 있어서 어떤 객체를 삭제하는지 명확한 형태가 이해하기 제일 좋을 것 같아서 li태그 마다 'li_숫자'의 형태로 id값을 선언하였습니다.

실제 예제소스를 보시면~

<!doctype html>
<html lang="en">
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
	
 </style>
 <script>
function action_remove(){
	var text_remove = $("#text_remove").val(); //삭제할 li태그의 id값 가져오기
	$("#"+text_remove).remove(); //해당id의 li태그 삭제하기
}
 </script>
  <meta charset="UTF-8">
  <title>페이지</title>
 </head>
 <body>
 
<input type="text" id="text_remove"/>
<input type="button" id="btn_remove" onclick="action_remove()" value="삭제"/>
<ul id="ul_list">
	<li id="li_1">사과</li>
	<li id="li_2">바나나</li>
	<li id="li_3">오렌지</li>
	<li id="li_4">딸기</li>
	<li id="li_5">망고</li>
<ul>

 </body>
</html>

택스트창에는 li의 id값을 입력해야합니다.

다음은 실행한 결과입니다~

li_2라고 선언한 바나나가 삭제된 것을 확인할 수 있습니다.

append와 remove는 li의 값을 동적으로 보여주었다가 안보여주었다가 할 때 좋은 메소드가 아닐까 생각되네요.

그럼 좋은 하루되세요~

저작자표시 비영리 변경금지 (새창열림)

'포로그래밍 > jQuery' 카테고리의 다른 글

[jQuery] 이벤트 사용시 $(this)의미와 활용 (0)	2020.12.08
[Jquery] Each()함수를 사용한 li값 가져오기 (0)	2020.12.03
[Javascript] 배열(Array)선언, 추가, 삭제, 관리방법 (0)	2020.11.29
[jQuery]CSS, 스타일 적용하기(width, height, display등등) (0)	2019.07.10
[jQuery]span, div등태그의 class값 변경 및 attr()의 활용 (0)	2019.07.02

원주남자