Bootbox not removing table row using remove() after confirmation

Question

I have a table using Bootstrap 3 and I want to delete a row using a button in each row if the user confirms using Bootbox.js.

I need it to delete the row that the button is contained. The confirmation fires when i click the button but when I click "Yes" the row is not deleted.

If i comment out the Bootbox part and just use $(this).parentsUntil('tbody').remove(); on the click() event, it works as expected but as soon as i uncomment, it doesn't work

Here is the JS includes and JS in the footer

<script src="<?=URL; ?>public/js/bootstrap.min.js"></script>
<script src="<?=URL; ?>public/js/bootbox.min.js"></script>
<script>
    $(document).ready(function(){
        $(document).on('click', '.complete', function(e) {
            //e.preventDefault();
            bootbox.confirm("Are you sure want to delete?", function(result) {
                if(result) {
                    $(this).parentsUntil('tbody').remove();
                    console.log('removed');
                }   
                else {
                    console.log('not remvoed');
                }
            });
        });
    });
</script>

Here is the table

<div class="table-responsive">
    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>Type</th>
                <th>Complete?</th>
            </tr>
        </thead>
        <tbody>
        <?php foreach($this->tasks as $task):?>
        <tr>
            <td><?php echo $task['type']; ?></td>
            <td>
                <button type="button" class="btn btn-default btn-lg complete">
                    Default Button
                </button>
            </td>
        </tr>   
        <?php endforeach?>
        </tbody>
    </table>
</div>

Answer 1

Here's a fiddle: http://jsfiddle.net/afP5N/1/

What you have is a scoping issue - the 'this' inside the callback is not the same as 'this' inside the click event.

I made bootbox.confirm a function of an empty object for simplicity and added some console output to show you how 'this' changes.

var _this = this; //saves a reference to the original 'this'