Диалоговое окно jQuery: как удалить добавленные, но несохраненные элементы при закрытии

Question

У меня есть всплывающее окно jQuery Dialog, в котором я могу просмотреть и добавить элементы к существующему контенту. Новый контент сохраняется, как только я нажимаю кнопку SAVE.

<div id="container"> 
    <ul> 
    <li>Elem 1</li> 
    <li>Elem 2</li> 
    </ul> 

    <button id="btnAdd">ADD</button> 
    <button id="btnSave" value="submit">SAVE</button> 
</div> 

<button id="openModal">Open dialog</button> 

--------------------------------------------- 

$(function() { 
    $("#container").dialog(); 
}); 

$('#openModal').click(function() { 
    $("#container").dialog(); 
}); 

$('#btnAdd').click(function() { 
    $("#container ul").append("<li>NEW Elem</li>"); 
}); 

$('#btnSave').click(function() { /* ignore */ }); 

Моя проблема теперь в том, что содержание не получает такой неудачи, когда пользователь нажимает на «Х» (закрыть) в заголовке. Я хочу вернуться в исходное состояние, когда диалог был впервые открыт и до того, как новые элементы были добавлены.

Как это можно решить?

Fiddle-Demo: https://jsfiddle.net/SchweizerSchoggi/vsd1qpLg/

EDIT: Я обновил образец. Это просто упрощено. Я не могу добавить класс или идентификатор к новым li.

Answer 1

Просто добавьте эту функцию в коде Jquery

var numlist = $('li').length; 

$("#container").on("dialogclose",function(event,ui){ 
    var count = 1;  
    $('li').each(function(){ 
     if(count>numlist) 
     { 
      $(this).remove(); 
     } 
     count++; 
    }); 
}); 

Или вы можете использовать этот

var numlist = $('li').length; 

$("#container").on("dialogclose",function(event,ui){ 
    var finallist = $('li').length; 
    $('li').slice(numlist,finallist).remove(); 
}); 

Answer 2

Обрабатывать событие BeforeClose:

$(function() { 
 
    // save the dialog original content 
 
    var innerHtml = $("#container").html(); 
 
    $("#container").dialog({ 
 
    autoOpen: false, 
 
    beforeClose: function(event, ui) { 
 
     // restore the dialog original content 
 
     $("#container").html(innerHtml); 
 
    } 
 
    }); 
 

 
    $('#openModal').click(function(e) { 
 
    $("#container").dialog('open'); 
 
    }); 
 
}); 
 

 
// the event delegation for buttons inside the dialog change in: 
 
$(document).on('click', '#btnAdd', function() { 
 
    $("#container ul").append("<li class='green'>NEW Elem</li>"); 
 
}); 
 

 
$(document).on('click', '#btnSave', function() { 
 
});

#container { padding: 10px; border: solid 1px red; margin-bottom: 30px; } 
 
#container button { margin-top: 20px; } 
 

 
#container ul li.green { color: green; }

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 

 

 
<div id="container"> 
 
    <ul> 
 
     <li>Elem 1</li> 
 
     <li>Elem 2</li> 
 
    </ul> 
 

 
    <button id="btnAdd">ADD</button> 
 
    <button id="btnSave" value="submit">SAVE</button> 
 
</div> 
 

 
<button id="openModal">Open dialog</button>

Answer 3

Надеюсь, вам понадобится нечто подобное.

Сохраните сохраненную li в отдельной глобальной переменной.

ulhtml = $("#container ul").html(); 

Приобретение сохраненного li при открытии модели.

$("#container ul").html(ulhtml); 

FIDDLE DEMO

var ulhtml; 
$(function() { 
    ulhtml = $("#container ul").html(); 
    $("#container").dialog(); 
}); 
$('#openModal').click(function() { 
    $("#container ul").html(ulhtml); 
    $("#container").dialog(); 
}); 

$('#btnAdd').click(function() { 
    $("#container ul").append("<li class='green'>NEW Elem</li>"); 
}); 

$('#btnSave').click(function() { 
    ulhtml = $("#container ul").html(); 
});