How to slide a div when I click in an <a> tag?

Question

Well, I have this script over here, when I click on it, It should delete from database and then slideUp the div I deleted, but it isn't working.

<div id="warn"> 
    <a data-aviso="<?=$warns['id']; ?>" id="click" style="float: right;">
        <i class="fa fa-times"></i>
    </a>

$(document).on("click", "#click", function() {
    $.ajax({
        type: "POST",
        url: "delete.php",
        data: "id=" + id,
        cache: false,
        success: function(g) {
            if (g == "1") {
                $("#warn").slideUp("slow");
            }
        }
    });
});

warn is the id of the div I want to slideUp. Also, it only slideUp the first one I click, the rest of them don't move.

UPDATE: This seems to work I just gave the div warn a new id:

<div id="warn<?=$warns['id']; ?>">  

And in the script I just did this:

$(document).on("click", "#click", function(){
 var id = $(this).attr('data-aviso');
   $.ajax({
    type: "POST",
    url: "delete.php",
    data: "id="+id,
    cache: false,
    success:function(g){
      if(g == "1"){
        $('#este'+id).slideUp("slow");
      }
    }
  });
});

Answer 1

I believe you mean this:

1. change the id to class
2. get the data attribute
3. access the wrapping div of what you clicked by saving the object in a variable
4. stop the link for following any href

Like this

<div class="warn"> 
  <a data-aviso="<?=$warns['id']; ?>" class="click" style="float: right;">
    <i class="fa fa-times"></i>
</a>

using

$(document).on("click", ".click", function(e) {
  e.preventDefault(); // stop default action of link
  var $link = $(this);
  var id = $link.data("aviso");
  $.ajax({
    type: "POST",
    url: "delete.php",
    data: "id=" + id,
    cache: false,
    success: function(g) {
        if (g == "1") {
            $link.closest("div.warn").slideUp("slow");
        }
    }
  });
});