Jquery and php delete row without refresh page

Question

I am trying to make a jquery delete div function but i have one problem.

When i press submit button div was not removed and also page refreshed. How can i do without refresh page.

This is my DEMO page

This is my jquery function code:

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

and also HTML code here:

<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>

What I want. Div without refreshing the ilan_alani is deleted.

Answer 1

You are using form tag and submit button which submit your form on click try to remove form tag and button type as submit

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

to

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

Answer 2

You can add onclick="return false;" on <form> to avoid event submit like this:

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

Demo

Answer 3

What you want to do is make a php page apart from this,
which deletes a row based on your get or post value

something like this (with your own security and db connection added)

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

Than with your javascript button or whatever has the click event,
you add the ajax to call the page above.

So this will look something like this:

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