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에서 추천하는 방식입니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| HTML element를 jQuery Mobile 버튼으로 변환하기 (0) | 2012.10.30 |
|---|---|
| 다이나믹하게 버튼 생성하기 (0) | 2012.10.29 |
| 리스트 다루기 예제 (0) | 2012.10.29 |
| 리스트 Customization 하기 (0) | 2012.10.26 |
| 리스트에서 이벤트 관리하기 (0) | 2012.10.25 |
| 리스트에 아이템 insert 하기 (0) | 2012.10.24 |
| Ajax 로 리스트 Retrieve 하기 (0) | 2012.10.23 |
| HTML element 를 jQuery Mobile list 로 바꾸기 (0) | 2012.10.23 |
| 다이나믹하게 리스트 생성하기 (0) | 2012.10.22 |
| window를 생성하는 예제들... (0) | 2012.10.21 |