Jquery и php удалить строку без обновления страницы

Question

Я пытаюсь создать функцию div div jquery delete, но у меня есть одна проблема.

Когда я нажимаю кнопку отправки, 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> 

То, что я хочу. Div без обновления ilan_alani удаляется.

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, кроме этого,
который удаляет строку на основе вашего получить или после значения

что-то вроде этого (с вашей собственной безопасности и подключение к БД добавлено)

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

чем с яваскриптом кнопкой или что-то есть событие щелчка,
добавить т он 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'); 
    }); 
});