从.html（）中排除元素

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.

Answer 2

Try this instead :

var innerHTML = $("div.multiple_number").html()
                .replace($("div.multiple_number input#add_phone").html(), "");

Good Luck