delete komentar terbaru ajax

saya mau tanya gan, saya bikin tombol delete dg ajax, berfungsi sih, cuma ga berfungsi untuk komentar yang baru di kirim, dan ga ada response apa2, tapi kalo direfresh browsernya baru bisa dihapus

terima kasih

//ajax delete
<script type="text/javascript">
	$(".delete").click(function(){
        var id = $(this).data('id');
        var _token = $("input[name='_token']").val(); //
        $.ajax(
        {
            url: '{{ url('/komentar') }}' + '/' + id,
            type: 'POST',

            data: {
                id: id,
                _token: _token,
            },
            success: function ()
            {
            	$('.komentar' +id).remove();
                console.log("terhapus");
            }
        });
    });
</script>

//ajax kirim komentar
<script>
	$(document).ready(function() {
     // on button click we are getting values by input name.
      $(".komentar").click(function(e){
        e.preventDefault();
        var _token = $("input[name='_token']").val(); // get csrf field.
        var isi = $("#isi").val();
        var userId = '{{Auth::user()->id}}';
        var username = '{{Auth::user()->name}}';
        var avatar = '{{Auth::user()->gravatar}}';

        var undanganId = '{{$undangan->id}}';


    if(isi == '') return false;

    $('#isi').val("");
        $.ajax({
              url: "{{route('komentar')}}",
              type:'POST',

    		  dataType: "json",
              data: { _token:_token, isi:isi, userId:userId, undanganId:undanganId},
              success:function(data) {
    		console.log(data);
    		var komentar = '<hr><div class="media komentar'+ data[0].id +'"><div class="media-left"><img class="media-object" style="width:55px;border-radius:100px;float:left" src="' + avatar + '" /></div><div class="media-body "> <h5 class=media-heading><b>'+username+'	 </b></h5><blockquote style="font-size:13px">' + data[0].isi + '</blockquote> <div class="btn-group" role="group" aria-label="..."><button type="button" class=" btn btn-xs btn-default delete" data-id="'+data[0].id+'"><span class="glyphicon glyphicon-trash"></span> Hapus</button><button type="button" class=" tombol btn btn-xs btn-default"><span class="glyphicon glyphicon-edit"></span> Ubah</button></div></div><div class="media-right" ><div style="width:100px"><i style="font-size:10px"><span class="glyphicon glyphicon-time"></span> Baru Saja</i></div></div></div>';
         $('.add-new').prepend(komentar);
     			}});


  })
  });
</script>

//controller hapus
 public function delete($id)
    {
        $komentar = Komentar::findOrFail($id);
        $komentar->delete();

        return response()->json([$komentar]);
    }
}

//view komentar
<div class="add-new">

  @foreach($komentars as $komentar)
  <hr>

  <div class="media komentar{{$komentar->id}}">
  <div class="media-left">
    <img src="{{ $komentar->user->gravatar }}" class="media-object" style="width:55px;border-radius:100px;float:right">
  </div>

  	<div class="media-body">
    <h5 class="media-heading"><b> {{ $komentar->user->name }} </b>
 	</h5>


    <blockquote  style="font-size:13px">{{ $komentar->isi }}</b></blockquote>
    @if(Auth::user()->id == $komentar->user_id)
    <div class="btn-group" role="group" aria-label="..."><button type="button" class=" btn btn-xs btn-default delete" data-id="{{ $komentar->id }}"><span class="glyphicon glyphicon-trash"></span> Hapus</button><button type="button" class=" tombol btn btn-xs btn-default"><span class="glyphicon glyphicon-edit"></span> Ubah</button></div>
    @endif
	</div>

	<div class="media-right"><div style="width:100px">
     <i style="font-size:10px"><span class="glyphicon glyphicon-time"></span> {{$komentar->created_at->diffForHumans()}}</i>
  	</div></div>

	</div>

 @endforeach
</div>
<hr>
  <div id="btn-more" data-id="{{$komentar->id}}" class="btn btn-block" style="background-color:#ba68c8; border-radius:100px;color:#fff">Muat lebih banyak</div>
  <br>
</div>
</div>
</div>