追加前清除html [英] Clear html before appending

问题描述

我这里有一个函数，它使用before jquery方法添加链接来显示页码和即时消息

I have here a function that displays page number and im using the before jquery method to append the links

displayPageNums: function(aPages) {
   for (let i = 1; i <= aPages; i++) {

       /* Create list element wrapped with jquery */
       const li = $(`<li class="page-item" data-value="${i}">
           <button class="page-link">${i}</button>
           </li>`);

       /* Attach oTodo.getTodoList function as handler for click event */
       li.click(oTodo.getTodoList);

       /* Add li element before next */
       //$('#next').before();
       $('#next').before(li);
      }
},

这是html标记

<nav aria-label="Page navigation example">
     <ul class="pagination">
           <li class="page-item" id="prev"><a class="page-link" href="#">Previous</a></li>
           <li class="page-item" id="next"><a class="page-link" href="#">Next</a></li>
     </ul>
</nav>

这是在服务器端获取页码的ajax请求

and this is the ajax request to get the page number on the server side

getTodoList: function(event) {
     const value = event ? event.currentTarget.dataset.value : 1;
     $.ajax({
         url: '/todo/rest/getTodoList?pages=' + value,
         type: 'GET',
         dataType: 'json',
         success: function(aResult) {
                oTodo.displayPageNums(aResult.sPages);
            }
        });
    },

我成功显示了该页面，但是每当我单击链接时，它就会一次又一次地添加链接示例

I successfully display the page but whenever i click the links it just append the links again and again example

未单击链接时

点击链接时

我尝试使用清除HTML

I tried to clear the html using

   $('#next').before();
   $('#next').before(li);

但是它怎么不起作用

推荐答案

您可以这样做， 如下更改您的html代码

You can do like this, Change your html code as below

<nav aria-label="Page navigation example">
     <ul class="pagination" id="ulPagination"></ul>
</nav>

并按如下所示更新displayPageNum()函数

And update your displayPageNum() function as below

displayPageNums: function(aPages) {
    const pageHtml =  $(' <li class="page-item" id="prev"><a class="page-link" href="#">Previous</a></li>') ;
   
   for (let i = 1; i <= aPages; i++) {

       /* Create list element wrapped with jquery */
       const li = $(`<li class="page-item" data-value="${i}">
           <button class="page-link">${i}</button>
           </li>`);

       /* Attach oTodo.getTodoList function as handler for click event */
       li.click(oTodo.getTodoList);

       pageHtml.append(li)
      }
      
      pageHtml.append($('<li class="page-item" id="next"><a class="page-link" href="#">Next</a></li>'))
      $("#ulPagination").html("");
      $("#ulPagination").html(pageHtml);
},

这篇关于追加前清除html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！