1. 程式人生 > 實用技巧 >jquery新增(append)刪除(remove)文字,帶數字自增

jquery新增(append)刪除(remove)文字,帶數字自增

    $('.js-add').click(function () {
      var n = 1;
      var check = $('.js-chenked label');
      if (check.hasClass('checked')) {
      $('.ul-trade .s1 .desc2').fadeIn();
      n = $('.ul-trade .s1 .desc2 > .item').length + 1;
      $('.ul-trade .s1 .desc2').append('<div class="item"> 第<span class="numbers">
' + n + '</span>階段: <input type="text" placeholder="" > € <input type="text" placeholder=""> </div>'); } }); $('.js-js').click(function () { var n = $('.ul-trade .s1 .desc2 > .item').length; if (n > 1) { $('.ul-trade .s1 .desc2 > .item
').eq(-1).remove(); return } })

大致思路就是點選新增的時候給他新增一個階段,點選第二次的時候 n 可以變為二 依次類推, 點選刪除的時候按節點來刪除,也就是從最後一個子節點開始刪除,當他的節點長度(length)為一的時候剩下一個階段留在那給使用者一個提示!
說白了這就是一組假資料,這個只建議初學者看看,能用真資料就用真資料,總感覺假資料給使用者的體驗不是特別的好的!