Question

I have to remove a specific element (button with #add_phone) from .html() of jquery.

So here’s the thing. At first there are field(phone number) + select(phone type) + button(#add_phone), and all three are enclosed in div as a container. And when I click the button, it will recreate that through .html().
The JS is as follows:

$('#add_phone').click(function() {
    $('div.multiple_number:last').after('<div id="phone_div_id' + phone_div_id + '" class="multiple_number">'+ $('div.multiple_number').html() +'</div>');
    ...
    //append a remove [-] button, etc...     
});

and here’s the html:

<div class="multiple_number" id="phone_div_id0">
    <label>Phone Number(s):</label>
    <input name="phone" id="phone[]" placeholder="Phone Number"/>
    <select name="phone_type[]" id="phone_type">
        <option value="1">Mobile</option>
        <option value="2">Home</option>
        <option Value="3">Office</option>
        <option Value="3">Fax</option>          
    </select>
    <input type="button" name="add_phone" class="add_phone_class" id="add_phone" value="ADD MORE" />
</div>

So in effect, I am creating multiple phone numbers for a form. But, here’s the problem. Inside is an input type=”button” (#add_phone button). And I would want to exclude it from .html().

I have tried:

$('div.multiple_number:not(#add_phone)').html()
$('div.multiple_number:not(input#add_phone)').html()
$('div.multiple_number:not(#add_phone)').not(#add_phone).html()
$('div.multiple_number:not(#add_phone)').not(input#add_phone).html()

And the class name counterpart instead of using id name. I wouldn’t also want to place the #add_phone button outside the div, for aesthetics reason.

Answer 1

I’m a little bit unclear about what you’re looking for, but I assume that when the #add_phone button is clicked, you want the form to be duplicated and added below it with the exception of the #add_phone button itself.

Working off that assumption, the following should work

$('#add_phone').click(function() {
    var numberForms = $('div.multiple_number');
    var newNumberForm = numberForms.eq(0).clone(true);
    newNumberForm.find('#add_phone').remove();
    newNumberForm.attr('id', 'phone_div_id' + numberForms.length);
    numberForms.last().after(newNumberForm);
});

Here’s a live jsfiddle demo to show it working.

Your initial attempts didn’t work for a few reasons. The main one being that :not() selector and .not() methods only operate on the element being selected. It doesn’t filter based on child elements. Those methods would only work if the element you were selecting <div class="multiple_number" /> also had the ID add_phone.

Also, it is not recommended to use .html() as a way of cloning methods. Using string manipulation as an alternative to direct DOM manipulation can cause problems later on. Using .html() will force you to have to re-bind event handlers to the newly created DOM elements. The strategy I’ve provided above should be more future-proof, since it will also clone event handlers for any elements being copied. There are also cases where certain browsers will not replicate the original elements exactly when calling .html(), which is another reason to avoid it unless you have a specific reason for serializing your DOM elements as a string.