How to remove external div using jquery

Question

So I have this structure

<div class="field_with_errors"> <input id="count" name="count" size="2" type="text" /> <label class="message" for="count_for">Required</label> </div> 

How to remove external field_with_errors and internal message and just leave an input tag

if i do

 $("#count").closest(".field_with_errors").remove() 

removes the entire div

At first I can remove the internal .message , but not sure how to remove the external

 $("#count").closest(".field_with_errors").find('.message').remove() 

Any ideas

Answer 1

use replacewith() method,

 $(".field_with_errors").replaceWith($("#count"));​ 

here is an example of a violin

Answer 2

you can use replaceWith() method:

 $('.field_with_errors').replaceWith($("#count")); 

http://jsfiddle.net/mgy9W/