JavaScript RemoveChildアレイ
-
24-10-2019 - |
質問
これは十分にシンプルに見えますが、私はそれを動作させることができません。 DOM要素を追加できますが、配列を使用するときは削除できません。
<script language="javascript">
fields = 0;
count = 0;
function addInput() {
if (fields != 10) {
var htmlText = "<input type='search' value='' name='field[]' />";
var remButton = "<input type='button' value='del' onclick='remove()' />";
var newElement = document.createElement('div');
newElement.id = 'SomeID'+fields;
newElement.innerHTML = htmlText + remButton + newElement.id;
var fieldsArea = document.getElementById('text');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
...
}
count++;
}
// NEED HELP FROM HERE PLEASE
// You don't need to Loop, just get the button's id and remove that entire 'SomeID'
function remove() {
fieldsArea = document.getElementById('text');
fieldsArea.removeChild(SomeID1); <-----------------------THIS WORKS!
fieldsArea.removeChild(SomeID+count); <------------------THIS JUST WOULDN'T
count--;
}
</script>
削除関数では、someid1の動作を書き、最初に追加された要素を削除しますが、「count」を使用しようとすると、「要素」を削除することはできません。
どんな助けも感謝します。
ありがとうございました!
解決
最初に要素への参照を取得する必要があります。現在、未定義の変数を渡しています SomeID
関数に。
例えば:
var element = document.getElementById('SomeID' + fields);
// or starting by zero: var element = document.getElementById('SomeID0');
element.parentNode.removeChild(element);
削除したい場合 div
ボタンがクリックされたため、対応するものへの参照を渡す必要があります div
に remove
関数。
'<input type="button" value="del" onclick="remove(this.parentNode)" />';
this
ボタンを参照し、それは div
, this.parentNode
それを指します div
.
また、削除すべき要素を受け入れるには、関数を変更する必要があります。
function remove(element) {
element.parentNode.removeChild(element);
count--;
}
また、おそらく更新する必要があります fields
, 、しかし、あなたのコードがどのように機能するかはわかりません。
それらをすべて削除したい場合は、ループする必要があります。
for(;fields--;) {
var element = document.getElementById('SomeID' + fields);
element.parentNode.removeChild(element);
}
また、をご覧ください のドキュメント removeChild
.
他のヒント
removeChild
パラメーターとしてノード(DOM要素)が必要です。この場合
fieldsArea.removeChild(SomeID+count);
たとえば、この方法でノードを渡すことができます
fieldsArea.removeChild(document.getElementById('SomeID'+count));
所属していません StackOverflow