CODEWITHSUNDEEP
jquerycss
user1049057
user1049057

Reputation: 459

remove dynamically created div using jquery

It seems to be simple logic thing, but some how I cannot figure it out. I am behind this more than 2 hours and nothing seems to be working.. I am doing a form validation. On submit of the form, I check if the fields are empty or not. If empty, I add a class to the field so it becomes red in color and then create a new div and display a error message. I am having couple of issues with this. I am testing in IE8 and addClass is not working in that. Below is the code snippet

var first =  true;
if(first == true){
$('#submit_form .required').filter(':visible').each(function() {
    var input = $(this);
    if($(this).is(':empty')){
        $(this).css("border","1px solid #FF0004");
        //$(this).addClass("highlight");
        $(this).after('<div class="error_text">Required</div>');
        first = false;
        return false;
    }else{
        return true;
    }
});
}
else{
  $('#submit_form .required').filter(':visible').each(function() {
    var input = $(this);
    if($(this).is(':empty')){
        $(this).css("border","1px solid #FF0004");
        //$(this).addClass("highlight");
                  //I ned to remove the Required text here or else it will get added twice.
        $(this).after('');
                  //Add the text here
                    $(this).after('<div class="error_text">Required</div>');
        return false;
    }else{
        return true;
    }
});
}

So when the user clicks the submit button for first time first = true, it validates and which ever field is empty, it will display that red border and the text as well. This is working fine. Now when the user fills in some fields and again enter submit, there are some more mandatory fields that are not filled in. So now I want the filled fields to be remove the border and the Required text and then display red and Required for those that are empty now. I tried so many things and I am sick with this. Somehow I am not getting a right logic for this. Can some body out there help me in this? I don't want to use validate plugin.

Upvotes: 0

Views: 228

Answers (1)

Anthony Grist
Anthony Grist

Reputation: 38345

When present the <div> you want to remove is the next element after the one you're checking (the one this refers to), so you should be able to just do this to remove it:

$(this).next('div.error_text').remove();

As an aside, if you want to return a value from your function it should just be return true or return false, using the equals sign (=) is incorrect.

The first logic seems unnecessary, since jQuery is good at handling the case where elements don't exist. You could simplify your entire code down to this:

var returnValue = true;
$('#submit_form .required').filter(':visible').each(function () {
    var input = $(this);
    input.next('div.error_text').remove();
    input.removeClass('highlight');
    if (input.is(':empty')) {
        input.addClass('highlight');
        input.after('<div class="error_text">Required</div>');
        returnValue = false;
    }
});
return returnValue;

Then the following CSS for the highlight class:

.highlight {
    border: 1px solid #ff0004;
}

Note that in the above I've used a returnValue variable. That's because you have an anonymous function being passed to .each(), and calling return false inside that will only end execution of the loop, it won't prevent your form from being submitted.

Upvotes: 1

Related Questions