jQuery和PHP刪除沒有刷新頁面的行

Question

我試圖使一個jQuery刪除div功能，但我有一個問題。

當我按下提交按鈕時，div並沒有被刪除，頁面也刷新了。 沒有刷新頁面怎么辦？

這是我的演示頁面

這是我的jQuery函數代碼：

$(document).ready(function () {

    $('.ilan_alani').on('click', '.showmenu', function(e) {
        var $ilan_alani = e.delegateTarget;
        $('.note_area', $ilan_alani).toggle('puff');
        $('.showmenu', $ilan_alani).hide();
        $('.hidemenu', $ilan_alani).show();
    })
    .on('click', '.hidemenu', function(e) {
        var $ilan_alani = e.delegateTarget;
        $('.note_area', $ilan_alani).toggle("puff");
        $(".hidemenu", $ilan_alani).hide();
        $(".showmenu", $ilan_alani).show();
    });
  $('.ilan_alani .psdlt').click(function() {
  $(this).parents('.ilan_alani').animate({ opacity: 'hide' }, 'slow');
});
});

還有HTML代碼：

<div class="ilan_alani">
    <div class="note_area">
        <div class="hidemenu"> 
          <form method="post">
          <input type='submit' name='Delete' value='Delete' class='psdlt' />
          </form></div>
    </div>
    <div class="test"></div>
    <div class="showmenu">Shows</div>
</div>

<div class="ilan_alani">
    <div class="note_area">
        <div class="hidemenu"> <form method="post">
          <input type='submit' name='Delete' value='Delete' class='psdlt' />
          </form></div>
    </div>
    <div class="test"></div>
    <div class="showmenu">Show</div>
</div>

我想要的是。 不刷新ilan_alani Div被刪除。

Answer 1

您正在使用form標簽和submit button ，單擊時提交您的form ，嘗試刪除form標簽和按鈕類型為submit

<form method="post">
      <input type='submit' name='Delete' value='Delete' class='psdlt' />
</form>

至

<input type='button' name='Delete' value='Delete' class='psdlt' />

Answer 2

您可以添加onclick="return false;" 在<form>上避免事件提交是這樣的：

<form method="post" onclick="return false;">
  <input type='submit' name='Delete' value='Delete' class='psdlt' />
</form>

演示版

Answer 3

您想要做的是使php頁面與此分開，
這會根據您的獲取或發布值刪除一行

這樣的事情（添加您自己的安全性和數據庫連接）

<?php 
     $db->query('DELETE FROM yourtable WHERE id = ' . $_POST['rowId']); 
?>

比起您的javascript按鈕或具有點擊事件的任何東西，
您添加ajax來調用上面的頁面。

所以這看起來像這樣：

$('#someElement').click(function() {
    id = the id of the row you want deleted;
    $.ajax({
        url: "url to the page above here",
        type: "post",
        data: {
            "rowId" : id,
        }
    }).done(function() {
        alert('row deleted');
    });
});