선택자 실습_jQuery

1.
아래의 버튼 클릭 시 해당 행을 제거하시오.

<ul>
	<li>
		<div>
			<button type="button" class="delBtn">제거</button>
		</div>
	</li>
	<li>
		<div>
			<button type="button" class="delBtn">제거</button>
		</div>
	</li>
	<li>
		<div>
			<button type="button" class="delBtn">제거</button>
		</div>
	</li>
</ul>

2.
아래의 버튼 클릭 시 해당 행의 input 값을 'ksmart' 으로 변경하시오.
(value -> val() )
val() : 인수가 없다면 value 값 가지고 오기
val('ksmart') : 인수가 있다면 value 값 변경

<ul>
	<li>
		<div>
			<input type="text" class="userName" value="한국스마트정보교육원">
		</div>
		<div>
			<button type="button" class="updateBtn">변경</button>
		</div>
	</li>
	<li>
		<div>
			<input type="text" class="userName" value="한국스마트정보교육원">
		</div>
		<div>
			<button type="button" class="updateBtn">변경</button>
		</div>
	</li>
	<li>
		<div>
			<input type="text" class="userName" value="한국스마트정보교육원">
		</div>
		<div>
			<button type="button" class="updateBtn">변경</button>
		</div>
	</li>
</ul>

 

1. 답

<script type="text/javascript">
	$(function(){
		$('.delBtn').click(function(){
			$(this).parents('li').remove();
		});
	});
</script>

2. 답

<script type="text/javascript">
	$(function(){
		$('.updateBtn').click(function(){
			var ex=$(this).parents('li').find('.userName');
			ex.val('ksmart.or.kr');
		});
	});
</script>