Удаление элемента по клику

Question

Я не знаю точного названия этого вопроса. , но я хочу спросить ..

<div id="listInserts"> 
    <div>tes <a class="del" rel="54" href="#">X</a></div> 
</div> 

У меня есть JQuery сценарий, как этот

$.get('dashboard/xhrGetListings', function(o) { 

    for (var i = 0; i < o.length; i++) 
    { 
     $('#listInserts').append('<p>' + o[i].text + '<a class="del" rel="' + o[i].id + '" href="#">X</a></p>'); 
    } 

    $('#listInserts').on("click",".del",function() { 
     delItem = $(this); 
     var id = $(this).attr('rel'); 

     $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) { 
      delItem.parent().remove(); 
     }, 'json'); 
     return false; 
    }); 
}, 'json'); 

выше скрипт работает только частично для меня. Я бы хотел, чтобы при выборе элемента в коллекции для селектора .del доступные данные на id=listInserts удалены без перезагрузки страницы. Элемент удаляется просто отлично, но страница перезагружается.

Answer 1

, если вы хотите, чтобы предотвратить перезагрузки страницы, используйте preventDefault(), как

$('#listInserts').on("click",".del",function(evt) { 
    evt.preventDefault(); //prevents page from being reloaded 
    ..... 

Answer 2

• ваш код не перегрузочный со мной

• но стараться размещать «на» обработчике из прибудут события

  //get 
  $.get('dashboard/xhrGetListings', function(o) { 
  for (var i = 0; i < o.length; i++) 
  { 
      $('#listInserts').append('<p>' + o[i].text + '<a class="del" rel="' + o[i].id + '" href="#">X</a></p>'); 
  } 
  }, 'json'); 
  
  //on 
  $('#listInserts').on("click",".del",function() { 
  delItem = $(this); 
  var id = $(this).attr('rel'); 
  
  $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) { 
      delItem.parent().remove(); 
  }, 'json'); 
  return false; 
  });