Adding a button for the end of the ul list-CodePudding

In my asp.net MVC application, I'm using signalR for push notifications.

There I load the notifications to the ul list like this.

 <ul >
   <li role="presentation" >
     <a  data-toggle="dropdown" aria-expanded="false" onclick="LoadData();">
       <i ></i>
       <span  id="notiCount">0</span>
     </a>
     <ul id="menu1"  role="menu"></ul>
   </li>
 </ul>

So I check the notifications and shows in the dropdown from javascript

function LoadData() {

  $('#menu1').empty();
  $('#menu1').append($('<li> Loading.. </li>'));
  $.ajax({
    type: 'GET',
    url: $("#Get").val(),
    dataType: 'json',
    data: {},
    success: function (data) {
      if (data.Success == true) {

        $('#menu1').empty();
        if (data.listNoti.length == 0) {
          $('')
          $('#menu1').append($('<li>There is nothing to show </li>'));
          console.log("No Data");
        }
        $("#notiCount").empty();
        $("#notiCount").append(data.listNoti.length);
        $.each(data.listNoti, function (index, value) {

          $("#menu1").append('<li> <a> <span class=image><img src ="/Theme/production/images/Annon.png"/> </span> <span>'   value.Ndetails   '</li><hr/>');

        });
      }
    }
  });
}

I want to add a section that end of the <li> as a button to clear all notifications. How to add this?

I tried adding it inside the menu1 but when the javascript load the notifications it got removed.

CodePudding user response：

Seems you just need to invoke append() out of each() to add the button

$.each(data.listNoti, function (index, value) {
  $("#menu1").append('<li> <a> <span class=image><img src ="/Theme/production/images/Annon.png"/> </span> <span>'   value.Ndetails   '</li><hr/>');
});
$("#menu1").append('<li><button onclick="removeEle()">Remove</button></li>')