jQueryで追加された隠し入力を削除できません

Question

隠し入力をフォームに動的に追加します。あなたがメッセージングしている場合、一度に4人（名前はcallsign_array）ですが、4つの隠れた入力が追加されます。フォームは、ajaxを使用して送信されます。その後、追加されたすべての隠し入力を削除したいのですが、$('.remove').remove();は動作しません（Andyにメッセージを送信し、別のメッセージをBarryに送信しようとすると、実際にAndyとBarryにメッセージが送信されます。 ChasにはAndy、Barry、Chasにメッセージが出ます）。私は何千もの同様の "jquery remove（）does not work"という質問があることを知っています。私はそれらを見てきましたが、これはうまくいくと思いますが、私はうんざりしています。

<div id="callsigns-div" data-callsigns='[]'></div> 

Answer 1

<crystalball on>

あなたのcallsign_arrayコンテナからエントリを削除されていません。そのため、さまざまなユーザーのメッセージが蓄積されます。

</crystalball off>

ロギングを追加します。

console.log("Before remove: ", $('.remove').length); 
$('.remove').remove(); 
console.log("After remove: ", $('.remove').length); 

が$().remove作品という自分を納得させます。読み込み/ DOM要素のデータセットのプロパティを書き込む際

更新

は$().dataと$().attr呼び出しを混在させないでください。これらのデータセット項目は、jQueryによって別々のメモリオブジェクトとしてキャッシュされます。

ログ追加：あなたの$().attr呼び出しは、後続$().data呼び出しの結果に何もしないことを自分自身を納得させるために

$('#callsigns-div').attr('data-callsigns', '[]'); 
console.log("Hope array is empty: ", $('#callsigns-div').data('callsigns')); 

を。

Answer 2

@ロバート・ウェイドが正しい：

var callsign_array = $('#callsigns-div').data('callsigns'); 
var form = $("#message_form"); 
for(var i=0; i<callsign_array.length; i++) { 
    form.append('<input type="hidden" class="remove" name="callsigns[]" value="' + callsign_array[i] + '" />'); 
} 
$.ajax({ 
    type: 'POST', 
    url: $(this).attr('action'), 
    data: $(this).serialize(), 
    dataType: 'script' 
}); 
// remove all appended inputs 
$('.remove').remove(); 
// reset the callsigns array 
$('#callsigns-div').attr('data-callsigns', '[]'); 

ページでは、これはコールサインの配列を保持するDIV含まれています。コメントする担当者はいませんが、すべてのユーザーを配列またはオブジェクトに保持し、その配列/オブジェクトをフォームに渡すことを検討することもできます。それは要素の追加/削除より少しきれいです。もちろん、サーバー側で解析する必要があります。

Answer 3

この

$.ajax({ 
type: 'POST', 
url: $(this).attr('action'), 
data: $(this).serialize(), 
dataType: 'script' , 
success: function(){ 
$('.remove').remove(); // reset the callsigns array 
$('#callsigns-div').attr('data-callsigns', '[]'); 
} 
}); // remove all appended inputs