Рекурсивное сохранение вложенностей с помощью $.Deferred

<ul class="questions">
    <li>
        <div class="question" id="id1">
            <span class="text">Первый вопрос, без вложенностей</span>
            <span class="edit">edit</span>
        </div>
    </li>
</ul>

<ul class="questions">
    <li>
        <div class="question" id="id1">
            <input type="text" name="title" value="Первый вопрос, без вложенностей">
            <span class="save">save</span>
        </div>
    </li>
</ul>

$('.questions').on('click', '.save', function() {
    var $li = $(this).closest('li');
    saveData($li);
});

function saveData($li) {
    var $item = $li.children('.question'),
        id = $item.id,
        $input = $item.children('input');

    $.ajax({
        type: 'POST',
        url: '/save',
        dataType: 'json',
        data: $input.serialize(),
        success: function(response) {
            if ( ! response.errors) {
                $li.replaceWith(response.data);
            }
        }
    });
}

<ul class="questions">
	<li>
	    <div class="question" id="id2">
	    	<span class="text">Вопрос второй с вложенностями</span>
	    	<span class="edit">edit</span>
	    </div>
	    <ul>
	        <li>
	            <div class="note" id="id1">
		            <span class="text">1е примечание</span>
		            <span class="edit">edit</span>
	            </div>
	        </li>
	        <li>
	            <div class="note" id="id2">
	            	<span class="text">2е примечание</span>
	            	<span class="edit">edit</span>
	            </div>
	        </li>
	    </ul>
	</li>
</ul>

$('.question').on('click', '.save', function() {
    saveData.call(this);
});

function saveData() {
	// this указывает на кнопку сохранения (может быть как вопрос, так и примечание)
    var self = this,
    	// соберем нужные элементы сохраняемого вопроса/примечания
        $button = $(this),
        $item = $button.closest('div'),
        $li = $item.closest('li'),
        // а также все данные необходимые для сохранения
        id = $item.attr('id').replace(/[^0-9.]/g, ""),
        inputs = $item.find(':input'),
        type = $item.attr('class');
    // создаём деферред обьект и возвращаем его (чтоб отследить выполнение)
    return $.Deferred(function() {
        var def = this;
        $.ajax({
            type: 'POST',
            url: '/save',
            dataType: 'json',
            data: inputs.serialize() + '&id=' + id + '&type=' + type,
            beforeSend: function(xhr){
            	// ищем открытые на редактирование вложенные примечания, кроме тех у которых есть класс .ignore
            	// .ignore мы будем навешивать на те примечания, которые по какимто причинам не удалось сохранить
                // (а если не удалось сохранить значит вёрстка не заменится мы попадём в бесконечный цикл
                // когда вернемся сохранять сам вопрос)
                var $inner_notes = $li.find('ul .save').not('.ignore');
                // если редактируемые влоеженности есть..
                if($inner_notes.length) {
                    // создаем массив для примечаний что нужно будет сохранить
                    var deferreds = [];
                    $inner_notes.each(function() {
                    	// добавляем в массив примечания, передавая на выполнение эту же функцию но с
                        // контекстом this кнопки .save этого примечания
                        deferreds.push(saveData.call(this));
                    });
                    // Подписываемся на завершение сохранения всех примечаний
                    $.when.apply(null, deferreds).always(function() {
                        // как только закончили с примечаниями - наконецто вызываем сохранение вопроса.
                        // self хранилась в замыкании и всё еще указывает на .save самого вопроса
                        saveData.call(self);
                    });
                    // прерываем сохранение вопроса
                    xhr.abort();
                }
            },
            success: function(response){
                if ( ! response.errors) {
                    // заменяем вёрстку всего вопроса, включая вложенности
                    $li.replaceWith(response.data);
                } else {
                    // если сохранение не удалось, игнорируем этот элемент в последнем проходе
                    $button.addClass('ignore');
                }
            },
            error: function() {
            	// если сохранение не удалось, игнорируем этот элемент в последнем проходе
                $button.addClass('ignore');
            }
        }).complete(function() {
            // вне зависимости от успешности аякс ответа - отмечаем деферред как resolve()
            def.resolve();
        });
    });
}

<ul class="questions">
    <li>
        <div class="question" id="id3">
            <span class="text">Вопрос c многоуровневыми вложенностями</span>
            <span class="edit">edit</span>
        </div>
        <ul>
            <li>
                <div class="note" id="id1">
                    <span class="text">1е примечание</span>
                    <span class="edit">edit</span>
                </div>
            </li>
            <li>
                <div class="note" id="id2">
                    <span class="text">2е примечание</span>
                    <span class="edit">edit</span>
                </div>
                <ul>
                    <li>
                        <div class="note" id="id4">
                            <span class="text">4е примечание</span>
                            <span class="edit">edit</span>
                        </div>
                        <ul>
                            <li>
                                <div class="note" id="id7">
                                    <span class="text">7е примечание</span>
                                    <span class="edit">edit</span>
                                </div>
                            </li>
                            <li>
                                <div class="note" id="id8">
                                    <span class="text">8е примечание</span>
                                    <span class="edit">edit</span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="note" id="id5">
                            <span class="text">5е примечание</span>
                            <span class="edit">edit</span>
                        </div>
                        <ul>
                            <li>
                                <div class="note" id="id6">
                                    <span class="text">6е примечание</span>
                                    <span class="edit">edit</span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <div class="note" id="id3">
                    <span class="text">3е примечание</span>
                    <span class="edit">edit</span>
                </div>
            </li>
        </ul>
    </li>
</ul>

// от предыдущего примера изменился только beforeSend метод, добавился вызов ф-ции getClosestChildrens
saveData: function() {
    ....
    beforeSend: function(xhr){
        var $inner_notes = $li.find('ul .save').not('.ignore'),
            // фильтруем вложенности и оставляем только ближайшие дочерние редактируемые элементы
            $children_notes = getClosestChildrens($inner_notes);

        if($children_notes.length) {
            var deferreds = [];
            $children_notes.each(function() {
                deferreds.push(app.saveData.call(this));
            });
            // запускаем сохранение вложенностей и подписываемся на завершение их сохранения
            $.when.apply(null, deferreds).always(function() {
                // вызываем запрос на сохранение родительского элемента
                // теперь это может быть как вопрос, так и примечание.
                // self берётся из замыкания и всегда указывает на родителя.
                app.saveData.call(self);
            });
            // прерываем сохранение вопроса/примечания
            xhr.abort();
        }
    },
    ....
}

// функция нахождения ближайших редактируемых примечаний (ближайшие на любом уровне вложенностей).
// так и не придумал как это сделать оптимальнее поэтому просто перебираю 
// все дочерние элементы и нахожу те из них, у которых нету родителей.
// т.е. нахожу ближайшие "примечания родители", либо ближайшие примечания без вложенностей.
function getClosestChildrens($inner_notes) {
    var children_notes = $.grep($inner_notes, function(value, key) {
        var is_child_of = false,
            $btn = $(value),
            $parent_li = $btn.closest('li');
        $inner_notes.not($btn).each(function(key,v) {
            if($(this).closest($parent_li).length) {
                is_child_of = true;
            }
        });
        return is_child_of ? false : true;
    });
    return $(children_notes);
}