Tạo và xóa element

21:32 pm GMT +7 Hanoi |

Trang chủ ›

Trao đổi - học tập ›

Jquery

Thêm vào trang Google +

Ở bài 5 bạn sẽ được học cách thêm / xóa element trên trang web. Các phương thức sẽ sử dụng là "appendTo()", "size()", và "remove()".

Như thường lệ, trước tiên là mã HTML:

CODE


<a href="#" id="them">Thêm vào list</a><br /> 
<a href="#" id="xoa">Xóa 1 element trong list</a> 
<ul id="themxoa"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul>

Phương thức size() sẽ cho bạn biết số lượng element. Ví dụ, để lấy số li trong #themxoa với phương thức size()

CODE


$(function() { 
     var i = $('#themxoa li').size() + 1; 
    alert("Số element là " + i); 
    }); 
});

appendTo() sẽ giúp bạn thêm element và remove() sẽ xóa bỏ element. Cách sử dụng như sau

CODE


$('Đoạn text hoặc mã HTML bất kỳ').appendTo('div'); // Thêm vào bên trong thẻ div 
$('#themxoa li:last').remove(); // Xóa bỏ thẻ li cuối cùng bên trong #themxoa

Gộp 3 phương thức trên, ta sẽ thay đổi 2 link #add và #remove để thêm/xóa element li bên trong #themxoa

CODE


$(function() { 
    var i = $('#themxoa li').size() + 1; 
    $('a#them').click(function() { 
         $('<li>' + i + '</li>').appendTo('ul#themxoa'); 
         i++; 
    }); 
    $('a#xoa').click(function() { 
        $('#themxoa li:last').remove(); 
        i--; 
    }); 
})

Theo ntuts

Thêm vào trang Google +

Số lần xem : 5629

Đánh giá

Facebook

Bài viết liên quan

09/06/2011 21:25 Chọn element nâng cao

Bài viết mới hơn

<< Trang trước