0

我必须从 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 之外。

4

2 回答 2

1

我对您要查找的内容有点不清楚，但我假设#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);
});

这是一个现场 jsfiddle 演示来展示它的工作原理。

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

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

于 2012-11-04T18:48:51.090 回答
0

试试这个：

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

祝你好运

于 2012-11-04T16:46:57.190 回答