제이쿼리 선택자 실습_jQuery

1.
버튼 클릭 시 해당 행의 .my-text 라는 클래스를 찾아 상위 article 태그를 제거하시오.

<ul>
	<li>
		<article>
			<section>
				<button type="button" class="mybtn">클릭</button>
			</section>
		</article>
		<article>
			<span class="my-text">한국스마트정보교육원</span>
		</article>
	</li>
	<li>
		<article>
			<section>
				<button type="button" class="mybtn">클릭</button>
			</section>
		</article>
		<article>
			<span class="my-text">한국스마트정보교육원</span>
		</article>
	</li>
	<li>
		<article>
			<section>
				<button type="button" class="mybtn">클릭</button>
			</section>
		</article>
		<article>
			<span class="my-text">한국스마트정보교육원</span>
		</article>
	</li>
</ul>​

2.
버튼 클릭 시 해당 행의 .myinput 찾아 value 속성값을 ksmart로 변경하시오.

<ul>   
      <li>
         <article>
            <section>
               <button type="button" class="mybtn20">클릭</button>
            </section>
         </article>
         <article>
            <input type="text" class="myinput" value="한국스마트정보교육원">
         </article>
      </li>   
      <li>
         <article>
            <section>
               <button type="button" class="mybtn20">클릭</button>
            </section>
         </article>
         <article>
            <input type="text" class="myinput" value="한국스마트정보교육원">
         </article>
      </li>   
      <li>
         <article>
            <section>
               <button type="button" class="mybtn20">클릭</button>
            </section>
         </article>
         <article>
            <input type="text" class="myinput" value="한국스마트정보교육원">
         </article>
      </li>   
   </ul>

 

1. 답

<script type="text/javascript">
$(function(){
		$('.mybtn').click(function(){
			$(this).parents('li').find('.my-text').parent('article').remove();
		});
	});
</script>

2. 답

<script type="text/javascript">
	var mybtn=$('.mybtn');
	mybtn.on('click',function(){
		$(this).parents('li').find('.myinput').val('ksmart');
	})
</script>