.htmlで置換するときは、隠し値を削除して<br>を置き換えます。

Question

私は、特定の「不在者」とそのIDを隠しフォームで追加することができるコードを、クリックすると不在者リストに追加します。もう一度クリックすると、不在者リストから「不在者」が削除されます。しかし、もう一度クリックすると、リストの中にはさらに のコードと隠しフォームの値が削除されていないように見えます。削除された不在者がデータベースに記録されないように、隠し値を削除する必要があります。不在者リストが表示されるように、私はbr が必要です。

は、ここに私のコードです：http://jsfiddle.net/gk5pV/8/

Answer 1

私は全面的に@charlietflに同意します。ブロックレベルの要素を使用してください。また、あなたの不在者を追跡するために単一の隠れた入力を使用してください。​​3210、コード：

$(function() { 
    $("td").click(function() { 
     var $this = $(this); 
     var user = $this.attr('id'); 
     var p = $('<p />').attr('user', user).text($this.text()); 
     var absentees = []; 
     if ($('#absentees').val().length > 0) { 
      absentees = $('#absentees').val().split(',') 
     } 
     if ($(this).hasClass('on')) { 
      //console.log("Already marked absent"); 
      //remove from collection 
      $("#collect").children('p[user="' + user + '"]').remove(); 
      absentees.splice(absentees.indexOf(user), 1); 
     } 
     else { 
      //console.log(user); 
      //add to collection 
      $("#collect").append(p); 
      absentees.push(user); 
     } 
     $this.toggleClass('on'); 
     $('#absentees').val(absentees.join(',')); 
    }); 

    $("#clicky").click(function() { 
     $('td').removeClass('on'); 
     $("#collect").empty(); 
     $('#absentees').val(''); 
    }); 
});​ 

Answer 2

ソリューションは非常に簡単です。ブロックレベルの要素（div、p、liなど）に、追加するテキストと非表示の入力を囲みます。<brタグは不要です。不在者をリストから削除するとブロック要素が削除され、入力はその要素の一部になりますので、存在しなくなります。新しいブロックレベルの要素にクラス名を指定すると、イベントハンドラをクラスにアタッチすることができます