0

送信時に動的に作成されるテキストフィールド（リストタグ）にユーザーがアイテムを入力できるようにするリストアプリケーションを作成しようとしています。次に、個別に追加されたアイテムを削除できるようにします（各リストタグの横に追加される削除ボタンを使用）。

これまでのところ、入力フィールドを送信した後、オブジェクトの配列を作成することができました。

リストタグを動的に作成するために、配列オブジェクトの「値」のみを取得するにはどうすればよいですか？選択した要素を削除するにはどうすればよいですか？

オブザーバーパターンを使用して、そのアプリケーションを完成させたいと思います。

以下の私のコードを参照してください：http： //jsfiddle.net/Lk3p8/

ありがとう

4

1 に答える 1

0

あなたが望むように見えるあなたのjsFiddleの更新版を作成しました。

..編集...あなたの要求を反映するように更新されました。値配列に保存していることに気づきませんでした。申し訳ありません。また、マークアップに若干の変更を加えました。

$(document).ready(function(){

var deleteBtn = "<input class='deleteitem' type='button' value='Delete' name='delete' id='delete' />";
var values = [];
$("#myForm").submit(function(){
    var frm= $("#myForm").serializeObject();

    values.push(frm.item);


    $("#display").append("<li><p>" + frm.item +"</p>"+  deleteBtn +"</li>");
    return false;
});


$("#display").on("click", ".deleteitem", function(event){
    var removeItem = $(this).parent().children('p').text();
     $('.log').after("<p>"+removeItem +  " removed</p>");      
    $(this).parent().remove();


    values = jQuery.grep(values, function(value) {
       return value != removeItem;
    });

    console.log(values);
});


});

概念実証のマークアップは最高ではありませんが、アイデアは理解できます。

于 2012-05-30T22:12:26.283 に答える