jquery新增(append)刪除(remove)文字,帶數字自增
阿新 • • 發佈:2020-12-21
$('.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)為一的時候剩下一個階段留在那給使用者一個提示!
說白了這就是一組假資料,這個只建議初學者看看,能用真資料就用真資料,總感覺假資料給使用者的體驗不是特別的好的!