Добавление и удаление с помощью ajax

Я пытаюсь добавить и удалить данные в базу данных с помощью ajax и php .

Все работает хорошо. Но проблема в том, что если я удалю последний элемент, а затем попытаюсь добавить новый, добавится только первый, второй, третий … также добавляются в базу данных, но они не отображаются на стр. Я вижу их только при обновлении страницы.

• Как бы я обрезал вкладку в окно автозаполнения JQuery?
• Получить скрытое входное значение из базы данных после выбора формы
• jquery ui автозаполнение с базой данных
• Как передать значение переменной javascript переменной php?
• Перезагрузить страницу после успеха ajax

Мой код для удаления и добавления:

Добавить :

 <!--Dodavanje texta--> <script type="text/javascript"> //Dodavanje texta $(document).ready(function () { $(document).on("click", "#btnAddText", function(e){ var title = $("#txtTitle").val(); var text = $("#txtText").val(); $.ajax({ url : "add-text.php", type : "POST", dataType:"json", data : {title:title, text:text}, beforeSend: function(){ $("#btnAddText").text("Saving..."); }, success: function(msg){ if(msg.br_rez == 1){ $(".sadrzaj").append(msg.result); $("#natpisPrazno").fadeOut(300); $("#txtTitle").val(""); $("#txtText").val(""); $("#btnAddText").text("Save"); $("#brRez").text(msg.br_rez); }else{ $("#example1").append(msg.result); $("#txtTitle").val(""); $("#txtText").val(""); $("#btnAddText").text("Save"); $("#brRez").text(msg.br_rez); } }, error: function(){ $("#error").text("Error! Something is wrong, the text is not saved!").fadeIn(300); } }); e.preventDefault(); }); }); </script> 

Удалить :

 <!-- Brisanje texta --> <script type="text/javascript"> $(document).ready(function() { //Brisanje texta $(document).on("click", ".btnDelText", function(){ var cijeliID = this.id.split("-"); var id = cijeliID[1]; $.ajax({ url : "text-delete.php", type: "POST", data : {id : id}, beforeSend: function(){ $("#delText-"+id).text("Deleting..."); }, success: function(msg){ if(msg){ if(msg == 0){ $(".divSadrzaj").fadeOut(300); $("#natpisPrazno").addClass("alert-warning"); $("#natpisPrazno").fadeIn().html("Er zijn nog geen texten!"); }else{ $("#textItem-"+id).fadeOut(800); $("#brRez").text(msg); } }else{ $("#errorDel").addClass("btn-danger"); $("#errorDel").text("Something was wrong!"); } }, error: function(){ $("#errorDel").addClass("btn-danger"); $("#errorDel").text("Something was wrong!"); } }); }); }); </script> 

И таблица, в которой показаны данные базы данных:

 <div class="content"> <!-- Main row --> <div class="row"> <div class="col-md-12 sadrzaj"> <?php $rez = mysqli_query($kon, "SELECT * FROM texts"); $brRez = mysqli_num_rows($rez); if($brRez < 1){ echo "<div class=\"alert alert-warning\" role=\"alert\" style=\"text-align:center;\"> Er zijn nog geen texts! </div>"; }else{ echo "<div id=\"natpisPrazno\" class=\"alert\" role=\"alert\" style=\"text-align:center;\"> </div>"; ?> <div class="box divSadrzaj"> <div class="box-title"> <h3>Totaal texts - <span id="brRez"><b><u><?php echo $brRez; ?></u></b></span></h3> </div><!-- /.box-title --> <div class="box-body"> <table id="example1" class="table table-bordered table-striped"> <thead> <tr> <th>ID</th> <th>Title</th> <th>Text</th> <th>Acties</th> </tr> </thead> <tbody> <?php while($red = mysqli_fetch_assoc($rez)){ echo "<tr id=\"textItem-". $red["id"] ."\"> <td style=\"text-align:center;\">". $red["id"] ."</td> <td style=\"text-align:center;\">". $red["title"] ."</td> <td style=\"text-align:center;\">". $red["text"] ."</td> <td style=\"text-align:center;\"> <a class=\"btn btn-danger btn-sm btnDelText\" title=\"". $red["title"] . "-wissen\" id=\"delText-". $red["id"] ."\"> <i class=\"fa fa-trash-o \"></i> </a> <a class=\"btn btn-success btn-sm\" title=\"". $red["title"] . "-veranderen\" > <i class=\"fa fa-pencil-square-o\"></i> </a><br/><br/> <div id=\"errorDel\"></div> </td> </tr>"; } ?> </tbody> <tfoot> <tr> <th>ID</th> <th>Title</th> <th>Text</th> <th>Acties</th> </tr> </tfoot> </table> </div> </div><!-- /.box --> <?php } ?> </div><!-- /.col --> </div><!-- /.row --> </div> 

Таким образом, все работает отлично, если в базе данных нет данных, и я пытаюсь добавить новый, он добавляется в базу данных и отображается на странице. Первая, вторая … вся запись добавлена ​​и показана. Затем, когда я пытаюсь удалить его, он работает также очень хорошо.

Только когда я удаляю последнюю запись, я могу добавить только одну новую запись, которая показана на странице. Второй также добавляется в базу данных, но он не отображается на странице, пока я не обновляю страницу.

Есть идеи? Благодарю.

ОБНОВИТЬ

Когда я добавляю $ (". Sadrzaj") к консоли, я получаю:

Когда я добавляю $ (". Sadrzaj"). Append ('test'); к козоле я получаю (показано):

Когда я пытаюсь добавить новую запись, я получаю следующий ответ (именно то, что мне нужно получить, строка таблицы для добавления в таблицу, но она не показана)

И затем, когда я обновляю страницу, я понимаю: