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 : 5682

Đá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