45

追加機能を使用してファイルをアップロードする機能を動的に追加するフォームがありますが、未使用のフィールドも削除できるようにしたいと考えています。これがhtmlマークアップです

<span class="inputname">Project Images:
    <a href="#" class="add_project_file"><img src="images/add_small.gif" border="0"></a>
</span>
<span class="project_images">
    <input name="upload_project_images[]" type="file" /><br/>
</span>

現在、「追加」gifをクリックすると、このjqueryで新しい行が追加されます

$('a.add_project_file').click(function() {
    $(".project_images").append('<input name="upload_project_images[]" type="file" class="new_project_image" /> <a href="#" class="remove_project_file" border="2"><img src="images/delete.gif"></a><br/>');
    return false;
});

入力ボックスを削除するために、クラス「remove_project_file」を追加してから、この関数を追加しようとしました。

$('a.remove_project_file').click(function() {
    $('.project_images').remove();
    return false;
});

これを行うにはもっと簡単な方法があるはずだと思います。たぶん私は削除のために$（this）関数を使用する必要があります。別の可能な解決策は、「プロジェクトファイルの追加」を展開して、フィールドの追加と削除の両方を行うことです。

JQueryウィザードの誰もが素晴らしいアイデアを持っています

4

2 に答える 2

54

これは自由回答形式の質問なので、このようなものを自分で実装する方法について簡単に説明します。

<span class="inputname">
    Project Images:
    <a href="#" class="add_project_file">
        <img src="images/add_small.gif" border="0" />
    </a>
</span>

<ul class="project_images">
    <li><input name="upload_project_images[]" type="file" /></li>
</ul>

ファイル入力をli要素内にラップすると、クリック時に「削除」リンクの親を簡単に削除できます。そうするためのjQueryは、あなたがすでに持っているものに近いです:

// Add new input with associated 'remove' link when 'add' button is clicked.
$('.add_project_file').click(function(e) {
    e.preventDefault();

    $(".project_images").append(
        '<li>'
      + '<input name="upload_project_images[]" type="file" class="new_project_image" /> '
      + '<a href="#" class="remove_project_file" border="2"><img src="images/delete.gif" /></a>'
      + '</li>');
});

// Remove parent of 'remove' link when link is clicked.
$('.project_images').on('click', '.remove_project_file', function(e) {
    e.preventDefault();

    $(this).parent().remove();
});
于 2009-09-30T23:36:57.847 に答える
9

追加する前にリセット関数を呼び出すことができます。このようなもの：

    function resetNewReviewBoardForm() {
    $("#Description").val('');
    $("#PersonName").text('');
    $("#members").empty(); //this one what worked in my case
    $("#EmailNotification").val('False');
}
于 2016-05-11T16:12:57.963 に答える