Boîte de dialogue jQuery: comment supprimer des éléments ajoutés mais non enregistrés à la fin

Question

J'ai une boîte de dialogue jQuery Dialog dans laquelle je peux réviser et ajouter des éléments au contenu existant. Le nouveau contenu est enregistré dès que je clique sur le bouton 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 */ }); 

Mon problème est maintenant, que le contenu ne soit pas sorte de revers lorsque l'utilisateur clique sur le « X » (fermer) dans la barre de titre. Je veux revenir à l'état d'origine lorsque la boîte de dialogue a été ouverte et avant que les nouveaux éléments aient été ajoutés.

Comment cela peut-il être résolu?

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

EDIT: Je l'ai mis à jour l'échantillon. C'est juste simplifié. Je ne suis pas en mesure d'ajouter une classe ou un Id au nouveau li.

Answer 1

il suffit d'ajouter cette fonction dans votre code jquery

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

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

Ou vous pouvez utiliser cette

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

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

Answer 2

Gérer l'événement 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

J'espère que vous avez besoin de quelque chose comme ça.

Stockez les li enregistrés dans une variable globale séparée.

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

Ajoutez le li lors de l'ouverture du modèle.

$("#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(); 
});