JavaScriptをするRemoveChildロジック/質問
-
20-09-2019 - |
質問
私は、Dojoのドラッグ&ドロップを使用しています。ユーザーがコンテナ(DIV dojoTypeでは=「dojo.dnd.Source」)に項目を追加すると、私は、ユーザーがページ全体を送信したときに、私は後で、サーバー上で処理できるように、フォームにそのデータを取得する必要があります。その部分は働いています。 次に、項目を削除するために、私は彼らが「ごみ箱」コンテナにアイテムをドロップ/ドラッグすることができます。 私は、非表示フィールドから項目を削除する方法が難しい概念化を抱えています。 私はすでに次の2つの関数を呼び出すためにイベントコード/サブスクライブしています。
あなたはremoveGoalFromHiddenFields機能を行うには良い方法があるなら、私が知っていることはできますか? 多くの「サブゴール」の項目が存在する場合があります。
私は以下の持っているものでテストを開始しようとしてんだけど、私はそれについていくつかの疑問を持っています。
おかげで、
ニール・ウォルターズ
function addGoalToHiddenFields( goalText){
var field = document.createElement("input");
field.setAttribute("type","hidden");
field.setAttribute("value",goalText);
field.setAttribute("name","subgoal");
//add new hidden-element to the existing form
document.getElementById("form1").appendChild(field);
}
function removeGoalFromHiddenFields( goalText){
//remove hidden field
nodes = document.getElementById("form1")
for (i=0;i<nodes.length ;i++ )
{
var pos = nodes[i].innerHTML.IndexOf(goalText)
if (pos > 0)
{
nodes.removeChild(node[i]);
}
}
}
また、私の代わりにこれを行うことができます。 ノード=のdocument.getElementById( "サブゴール")
解決
私はあなたがここに欲しいものを推測していることは dojo.queryの機能ですのます。
のようなものを試してみてください。
dojo.query("#form1 input[value=\"" + goalText + "\"]").forEach(function(field) {
field.parentNode.removeChild(field)
});
他のヒント
field.setAttribute( "タイプ"、 "隠れた");
HTML文書上のsetAttributeを使用しないでください。 IEのそれには多くのバグがあります。読みすることも簡単です通常のDOM-HTMLのプロパティを使用します:
field.type= 'hidden';
のvar POS =ノード[i]を.innerHTML.IndexOf(goalText)
値のためのHTMLマークアップを検索することは愚かである、とgoalTextはHTMLをエスケープすることを「<」や「&」のような文字が含まれている場合は動作しません。
入力が空の要素があるとしては、上記のコードでは、それが唯一のものではない入力の内容を検索しますように、ケースのnodes[i]
が良くないここであなたがそこに追加さ<input>
要素、のいずれかでなければなりませんinnerHTML
のように見えます。
value
プロパティを見て
var input= nodes[i];
if (input.name=='subgoal' && input.value==goalText)
input.parentNode.removeChild(input);
また、私の代わりにこれを行うことができます:ノード=のdocument.getElementById( "サブゴール")
いいえ、あなたのサブゴールの要素は一切のIDを持っていないよう。どちらの名前で入手ます:
var subgoals= form.getElementsByName('subgoal');
(DOM-0と同じである。)
var subgoals= form.elements.subgoal;
または、あなたが後でそれを取得を支援するために、各サブゴールにIDを追加します:
field.id= 'id-'+goalText;
あなたはgoalTextに特殊文字を持つことができる場合は、上記、再び、動作しません。
また、むしろDOMにすべてのものを置くよりも、JavaScriptで独自のルックを維持します:
var subgoalfields= {};
...
// on add
subgoalfields[goalText]= field;
...
// on remove
subgoalfields[goalText].parentNode.removeChild(subgoalfields[goalText]);
delete subgoalfields[goalText];