jquery .remove div with multiple classes not working

flynny
flynny used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

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?
Most Valuable Expert 2017
Distinguished Expert 2018
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial