jQuery dialog: How to remove added but unsaved items on close

I have a jQuery Dialog popup in which I can review and add items to the existing content. The new content is being saved as soon as I click the SAVE-Button.

<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 */ });

My problem now is, that the content does not get kind of setback when the user clicks the "X" (close) in the titlebar. I want to get back to the original state when the dialog was first opened and before the new items have been added.

How can this be resolved?

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

EDIT: I've updated the sample. This is just simplified. I am not able to add a class or Id to the new li's.

Just add this function in your jquery code

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

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

Or you can use this

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

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