0

jquery の .html() から特定の要素 (#add_phone の付いたボタン) を削除する必要があります。

これが問題です。まずfield(電話番号)+select(電話種別)+button(#add_phone)があり、この3つをコンテナとして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>

つまり、フォームに複数の電話番号を作成しています。しかし、ここで問題です。内部は input type="button" (#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

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.

于 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 に答える