jquery - 確認後にremove（）を使用してブートボックスがテーブル行を削除しない

Question

Bootstrap 3 を使用するテーブルがあり、ユーザーが Bootbox.js を使用して確認した場合、各行のボタンを使用して行を削除したいと考えています。

ボタンが含まれている行を削除する必要があります。ボタンをクリックすると確認が発生しますが、「はい」をクリックしても行は削除されません。

Bootbox 部分をコメントアウトし$(this).parentsUntil('tbody').remove();て click() イベントで使用すると、期待どおりに動作しますが、コメントを外すとすぐに動作しません

ここにJSが含まれており、フッターにJSがあります

<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>

ここにテーブルがあります

<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>