jquery - remove a div from form

Question

I have a form whose html looks like:

<div id="form_container">
        <h1><a>Untitled Form</a></h1>
        <form action="save_form" method="post" id="newform" name="newform">
          <div class="form_description">
            <h2 class="editable">Form title. Click here to edit</h2>
            <p class="editable">This is your form description. Click here to edit.</p>
          </div>
          <ul id="form_body">
          <li id="field1" class="world">
              <a href="#" onclick="return false;" class="hover">
              <label class="editable" for="field1">Text1</label>
              <input type="text" name="field1" value=""></a>
              <div class="element_actions">
                  <img src="/images/ico_delete_16.png" alt="Delete." title="Delete" class="remove_element">
              </div>
          </li>
           </ul>
        </form>
      </div>

I would like to clone the form and remove the 'element_actions' div from it. I do not want to modify the existing form, just the cloned version of it.

I have tried 'remove()' and 'detach' without success.

Here's the test on jsfiddle: http://jsfiddle.net/truthseeker/LYCkt/

thanks for your help.

Answer 1

Try this

$("#form_body").clone().find('.element_actions').remove().end().html();

Working demo

Answer 2

Try

$("#form_body").clone().find('.element_actions').remove()

Or

$("#form_body").clone().find('div .element_actions').remove()

If you require it to be in a div.