Reputation: 395
I want to make some changes to the css and class on form input text fields, when users click the reply button and I got it working but then the form at the bottom stays with the changes. So my question: Is there any way to undo these changes and return the form to previous state ?
$(".comment-reply-link").click(function() {
if($("#commentform").width() < 590){
$("#commentform input[type='text']").css("margin-left","0");
$("#commentform input[type='text']").removeAttr('class');
}
})
Upvotes: 1
Views: 3840
Reputation: 11671
This is an approach to store a cloned state with jquery's data and restore it whenever you want. Regardless of the number of changes you make to the element. For example,
HTML
<div id="commentform">
<input type="text" class="red-border" />
<button class="comment-reply-link">test</button>
</div>
<button class="undo">undo</button>
JS
$(".comment-reply-link").click(function() {
if($("#commentform").width() < 590){
/*create a clone of the element you modify*/
var theClone = $("#commentform").clone(true,true);
/*add the cloned element to a data attribute for restoring the state*/
$("#commentform").data("undo",theClone);
/*any kind of css modifications may follow*/
$("#commentform input[type='text']").css("margin-left","0");
$("#commentform input[type='text']").removeAttr('class');
}
})
$(".undo").click(function(){
/*if state undo exists, restore it*/
if($("#commentform").data("undo")){
var theClone = $("#commentform").data("undo");
$("#commentform").replaceWith(theClone);
}
});
CSS
/*this is an example css style related to a class*/
input.red-border{
border:red 1px solid;
}
Upvotes: 0
Reputation: 684
AFAIK, There is no method available to store changes happened in the DOM and revert back when you want. You can achieve that like below
$('.element').bind('click', plus10);
$('.revertChange').bind('click', minus10);
var input = $('#someInput');
function plus10(){
input.val(input.val() * 1 + 10);
}
function minus10(){
input.val(input.val() * 1 - 10);
}
If you are trying to add styles and revert make a class with necessary styles then toggle class
.someClass{
margin:10px;
color:green;
/* ...... */
}
then toggle class on element like below
$('element').toggleClass( "someClass" );
Upvotes: 2
Reputation: 8091
If you mean to undo the inline styles, well yes you can :
$("#commentform input[type='text']").css("margin-left","");
This will for example reset/undo your inline style of margin-left
.
Upvotes: 0