I have a simple script that should delete a div after the ajax call is success:
$ ->
$('body').on 'click', '.add-comment', (event) ->
event.preventDefault()
body = $('#body_comment')
target = event.target
$.ajax
method: 'POST'
url: '/comments/create'
data:
body: body
success: (data) ->
target.remove()
error: (data) ->
# nothing here
If I do:
console.log(target)
In the success block, it show the correct html div, but nothing happens when I do target.remove() or target.hide()
Where I wrong ?
PS: I've tried also to use $(target).remove() , without success.. new code:
$('body').on 'click', '.add-comment', (event) ->
event.preventDefault()
body = $('#body_comment')
target = event.target
$.ajax
method: 'POST'
url: '/comments/create'
data:
body: body
success: (data) ->
$(target).remove()
error: (data) ->
# nothing here
PPS: OK I've found that was a conflict with another mine script...sorry guys!
It should be
$(target).remove();
event.target
is DOMElement. In order to use jQuery methods, you should convert it to jQuery instance, but wrapping it into $
function.
Remove is a jquery function so you have to call it like so :
$(target).remove();
UPDATE
event.target is referring to the element clicked inside the .add-comment.
Try this :
target = $(this);
success: (data) ->
target.remove()