You are right, this is a scoping issue. Since this frequently changes when you change the scope by calling a new function, you can't access the original value by using it.

You can solve this in 2 ways.

1. Using fat arrow to bind this with the outer scope in your click handler.

example:

$('#test-popup-yes').click =>

2. Aliasing this so that you still have access to the original value of this.

example:

confirmRemove: (e) ->
  e.preventDefault()

  that = this //aliasing this to that

  ...

  $('#test-popup-yes').click ->
    $.magnificPopup.close()
    $.ajax
      type:     'PUT'
      dataType: 'JSON'
      url:      "/xxx/#{that.props.xxxId}/remove_entry"
      data:
        '_method': 'PUT'
        'xxx_id': that.props.id
      beforeSend: =>
        $.status_message 'Removing xxx', 0
        that.props.onDeleteStart()
      success: (data) =>
        $.success_message 'Successfully removed xxx'
        that.props.onDeleteCommit()
      error: (data) =>
        $.error_message 'Error removing xxx'
        that.props.onDeleteFailure()