Question

我正在尝试使用jquery删除div函数，但我有一个问题。

当我按下提交按钮时，div未被删除，页面也刷新了。如果没有刷新页面怎么办。

这是我的DEMO页面

这是我的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>

<强> Demo

Answer 3

你想要做的是创建一个除此之外的php页面，
根据您的get或post值删除一行

类似这样的东西（添加了你自己的安全性和数据库连接）

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

Jquery和php删除没有刷新页面的行

3 个答案: