从 .html() 中排除元素

Question

我必须从 jquery 的 .html() 中删除特定元素（带有#add_phone 的按钮）。

所以事情就是这样。一开始有field(phone number) + select(phone type) + button(#add_phone)，三者都作为容器封装在div中。当我单击按钮时，它将通过 .html() 重新创建。 JS如下：

$('#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...     
});

这是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>

实际上，我正在为一个表单创建多个电话号码。但是，这就是问题所在。里面是一个输入类型=“按钮”（#add_phone 按钮）。我想从 .html() 中排除它。

我试过了：

$('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()

与类名对应，而不是使用id名。出于美学原因，我也不想将#add_phone 按钮放在 div 之外。

Answer 1

试试这个：

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

祝你好运

Answer 2

我有点不清楚您要查找的内容，但我假设当单击 #add_phone 按钮时，您希望将表单复制并添加到其下方，#add_phone 除外按钮本身。

根据这个假设，以下应该可行

$('#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);
});

这是一个 live jsfiddle demo 来证明它的工作原理。

由于某些原因，您最初的尝试没有奏效。主要的是:not() 选择器和.not() 方法只对被选择的元素进行操作。它不会根据子元素进行过滤。只有当您选择的元素 <div class="multiple_number" /> 也具有 ID add_phone 时，这些方法才有效。

另外，不推荐使用.html()作为克隆方式。使用字符串操作作为直接 DOM 操作的替代方法可能会在以后导致问题。使用.html() 将迫使您必须将事件处理程序重新绑定到新创建的 DOM 元素。我在上面提供的策略应该更加面向未来，因为它还将为任何被复制的元素克隆事件处理程序。在某些情况下，某些浏览器在调用 .html() 时不会完全复制原始元素，这是避免它的另一个原因，除非您有特定原因将 DOM 元素序列化为字符串。