Remove a dynamic element with jQuery

Question

I am trying to remove a dynamically created element using jQuery.

Here is my example: http://jsfiddle.net/4uxbu/

When you click submit it highlights the required fields and displays the text This field is required. after the input. When the user clicks on the input the red box goes away, I want the text below the input to go away as well.

The message is set using the following code:

$('#' + required[i]).after('<p style="font-weight:bold;" id="' + required[i] + '_error">' + emptyerror + '</p>');

and I've tried to remove it with:

$('p#' + required[i] + '_error').remove();

But I can't get it to work properly.

Required is as below

required = ["vidHeight", "title", "vidWidth", "vidLen", "thumb", "file"];

Please see the fiddle for the full code.

Thanks

This is pretty round-about. Why not just add a ".error" class to your error messages, and then do a single $('form p.error').remove()? Simple, clean, elegant. — user229044
– user229044 ♦, Commented Aug 20, 2012 at 14:18
Would that not remove all of them? Thats why I put a unique class for each error — Adam
– Adam, Commented Aug 20, 2012 at 14:21
It seems like that's exactly what you're trying to do: Remove and re-add them each time. — user229044
– user229044 ♦, Commented Aug 20, 2012 at 15:03

Tim Banks · Accepted Answer · 2012-08-20 14:32:18Z

3

$('p#' + required[i] + '_error').remove();

Well, required[i] doesn't make any sense because you aren't in a loop where i is defined anymore. Try this:

$('#' + $(this).attr("id") + '_error').remove();

See: http://jsfiddle.net/4uxbu/1/

EDIT

Updated to handle the case of showing multiple errors when submitting multiple times with errors: http://jsfiddle.net/4uxbu/2/

edited Aug 20, 2012 at 14:32

Tim Banks

7,1895 gold badges33 silver badges28 bronze badges

answered Aug 20, 2012 at 14:22

aquinas

23.9k5 gold badges60 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Adam Over a year ago

This works perfectly! Except for the file upload fields, any ideas on them?

PCasagrande Over a year ago

Ah, I just realized why I was getting the error because of the frames. My mistake.

Tim Banks Over a year ago

If you submit multiple times, the error message keeps popping up a bunch. I modified the fiddle to handle that case: jsfiddle.net/4uxbu/2

Adam Over a year ago

When I use the code on my server I get Uncaught SyntaxError: Unexpected token ILLEGAL, how can I solve that?

aquinas Over a year ago

Something else is going on...which line does it say is causing the problem?

|

travis · Accepted Answer · 2012-08-20 14:26:05Z

0

The [i] will have no affect while not in the for loop, so I would suggest changing the following:

$(this).removeClass("needsfilled");
$('#' + required[i] + '_error').remove();

To something more like:

$(this).removeClass("needsfilled").next('#'+$(this).attr('id')+'_error').remove();

answered Aug 20, 2012 at 14:26

travis

513 bronze badges

Comments

PCasagrande · Accepted Answer · 2012-08-20 14:36:44Z

0

I would not store the names, but rather an array of the error messages. If you kept an array of actual items being added then you would reduce the number of DOM queries and have an easy way to address them. You could even create an object that associates the controls with the messages.

edited Aug 20, 2012 at 14:36

answered Aug 20, 2012 at 14:23

PCasagrande

5,4123 gold badges29 silver badges36 bronze badges

Collectives™ on Stack Overflow

Remove a dynamic element with jQuery

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related