1

フォームのクローンを使用して新しい分割を作成する追加ボタンを使用して動的フォームを作成しましたが、ID は異なります。ただし、ボタン自体を含め、各部門にある部門を削除する削除ボタンも必要です。

JQuery.remove()メソッドには慣れているのですが、ボタンのある区画の選択に困っています。

<div id="attendees">
        <div id="att1" class="attendee">
            <form name="droplist" action="html_form_action.asp" method = "get">
                <fieldset>
                    <legend><span class="legend">Filter</span></legend>
                    <label for="select">Category: </label>
                    <select id="select" size="1"  >
                        <option value=" " selected="selected"> </option>
                        <option value="employees">Number of Employees</option>
                        <option value="hits">Hits on TechCrunch</option>
                        <option value="time_founded">Time Founded</option>
                        <option value="total_money">Total Money</option>
                    </select>

                    <div id='radioContainer' style="display:block;">
                        <input type="radio" id="condition"  name="button" value="more"/> <label for="condition"> > </label></br>
                        <input type="radio" id="condition1"  name="button" value="less"/> <label for="condition1"> < </label>
                    </div>

                    <div id='radioContainerTime' style="display:block;">
                        <input type="radio" id="condition2"  name="button" value="later"/> <label for="condition"> After </label></br>
                        <input type="radio" id="condition3"  name="button" value="earlier"/> <label for="condition1"> Before </label>
                    </div>

                    <div id = "text_box" style="display:block;">
                        <label for="input_value">Amount: </label>
                        <input type="text" id="box" name="input_value" value="textIn" />
                    </div>
                    <button>remove</button>
                </fieldset>
            </form>
        </div>
        <a href="#" class="add">Add more</a>
</div>​

これまでの私のJavaScriptはこれです：

$(function(){
 var template = $('#attendees .attendee:first').clone(),
     attendeesCount = 1;

 var addAttendee = function(){
     attendeesCount++;
     var attendee = template.clone().find(':input').each(function(){
         var newId = this.id.substring(0, this.id.length-1) + attendeesCount;
         $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
         this.name = this.id = newId; // update id and name (assume the same)
     }).end() // back to .attendee
     .attr('id', 'att' + attendeesCount) // update attendee id
     .prependTo('#attendees'); // add to container
 };

 $('.add').click(addAttendee); // attach event
 }); 

$("button").click(function () {
  $this.remove();
});
4

1 に答える 1

3

ボタンを含むを削除するには、次の<div class="attendee">ようにします。

$("button").click(function () {
     $(this).closest(".attendee").remove();
     return(false);
});

これは、クリックされたボタンから親チェーンを検索して、 a を持つ最初の部分を見つけ、class="attendee"それを削除します。

参考までに、削除ボタンにクラスを配置することを強くお勧めします。ページ内のすべてのボタンに接続するのは少し危険だからです。

削除ボタンにクラスを配置するには、HTML を次のように変更します。

<button class="deleteButton">remove</button>

そして、jQuery を次のように変更します。

$(".deleteButton").click(function () {
     $(this).closest(".attendee").remove();
     return(false);
});

はreturn(false)、クリックに基づいてフォーム内のデフォルト アクションが発生しないようにします。

于 2012-08-22T19:46:45.740 に答える