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');
    });
});