리스트에서 아이템 지우기
Delete an item from a list
리스트에서 item 을 delete 하는 것은 jQuery 의 remove
() method를 사용해서 구현할 수 있습니다. 아래에 해당 아이템을 클릭하면 그 아이템이 delete 되는 소스를 만들어 보겠습니다.
Allow the removal of an element inserted
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<ol id=list1 data-role=listview>
</ol>
<br />
<a data-role=button id=add>Insert at the end of the list</a>
</div>
</div>
</body>
</html>
<script>
$("#add").bind ("click", function (event)
{
$("#list1").append ("<li>Inserted element</li>");
$("#list1").listview ("refresh");
});
$("li").live ("vclick", function (event)
{
$(this).remove ();
});
</script>
tistory423_01.htmllive
() method 로 <li>
items 에 대해 이벤트 핸들러를 걸었습니다. <li>
item 을 클릭(vclick) 하게 되면 그 아이템을 remove() 할 겁니다.
link의 click event 와 <li> element 를 잘 보세요. 이것은 jQuery Mobile에서 추천하는 방식입니다.