jquery .remove div with multiple classes not working

Hi all,

I am trying to remove a dynamically created div with classes using jquery. If i add an id to the div the remove works (i.e. .remove('#<ID>'); but when its not removing based on a css class or classes.

Can anyone help please?

function highlightField(textfield, valid) {

            if (textfield.parent().is(".textbox-wrapper")) {
                textfield.parent().remove('.input-status.input-cross'); //not working
                textfield.parent().remove(".error-popup"); //not working either?
                textfield.parent().remove(".valid-popup");
                alert('removed any popups');
                textfield.unwrap();
            }

            textfield.wrap("<div class='textbox-wrapper'></div>");

            if (!valid) {
                textfield.removeClass("valid"); //just in case
                textfield.addClass("error");
                textfield.parent().append("<div class='input-status input-cross'></div>");
            }
            else {
                textfield.removeClass("error"); //just in case
                textfield.addClass("valid");
                textfield.parent().append("<div class='input-status input-tick'></div>");
            }
        }

Open in new window


its a basic method I have for highlighting any fields which are either valid or invalid.
flynnyAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Try this
	if (textfield.parent().is(".textbox-wrapper")) {
		textfield.parent().find('.input-status.input-cross').remove(); //not working
		textfield.parent().find(".error-popup").remove(); //not working either?
		textfield.parent().find(".valid-popup").remove();
		alert('removed any popups');
		textfield.unwrap();
	}

Open in new window

0
 
flynnyAuthor Commented:
if it helps heres the html produced from a call to it

<div class="textbox-wrapper">

    <input id="ctl00_ContentPlaceHolder1_FirstNameTextbox" class="half error" type="text" maxlength="30" name="ctl00$ContentPlaceHolder1$FirstNameTextbox" placeholder="First name"></input>
    <div class="input-status input-cross"></div>

</div>

Open in new window


also if I alert out the html i.e.

<input placeholder="First name" name="ctl00$ContentPlaceHolder1$FirstNameTextbox" maxlength="30" id="ctl00_ContentPlaceHolder1_FirstNameTextbox" class="half error" type="text"><div class="input-status input-cross"></div>

Open in new window


which seems correct i think?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.