• ベストアンサー

getElementsByTagName parentNode.removeChild

再び同じような質問ですが document.getElementsByTagNameもparentNode.removeChildも、よく使い方がわからずコードを書いています。 下記コードで「消す」を実行させても、半分ずつしか削除されません。 12個から6個、次に3個という具合です。 一度に全部("input"のみ)削除するには、どうしたらよろしいでしょうか? <script type="text/javascript"> var gg=[]; function d() { elements = document.getElementsByTagName("input"); alert(elements.length + "個の要素が見つかりました") } function del() { gg = document.getElementsByTagName("input"); for(i=0;i<gg.length;i++)   gg[i].parentNode.removeChild(gg[i]); } </script> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <input name="test" type="text"><br> <br> <button onclick="d()">個数</button> <button onclick="del()">消す</button>

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

for(i=0;i<gg.length;i++) ちょっと考えればわかると思いますが・・・ gg[0]をremoveすると、今までgg[1]だったオブジェクトがgg[0]に 格上げされます。 なのでループでgg[1]を削除するとそれはそれまでgg[2]だったものです その流れでひとつ置きに削除されていくわけです。 なので、この手の処理はけつから消していきます。 for(i=gg.length-1;i>=0;i--){   gg[0].parentNode.removeChild(gg[i]); } ちなみにbuttonタグはサブミットをかねる場合がありますので むやみに使わないほうがいいでしょう。 やるならtype=buttonを使うか、きちんとreturn falseをすることです。

situmonnsya
質問者

お礼

ありがとうございました。

situmonnsya
質問者

補足

redfox63さんへの補足内容と同じですが、 parentNode.removeChildの使い方はこれで正しいですか?

その他の回答 (4)

noname#84373
noname#84373
回答No.5

No.4です それは忘れてください。はずかしい。 var o; while(o=document.getElementsByTagName("input")[0]) o.parentNode.removeChild(o); ; だと動くと思うけど効率が悪いかも・・・。 ということで、なかったことに!

situmonnsya
質問者

お礼

ありがとうございました。

noname#84373
noname#84373
回答No.4

while(gg[0])gg[0].parentNode.removeChild(gg[0]);

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

>parentNode.removeChildの使い方はこれで正しいですか? 自オブジェクトをけすのは親ノードからなのであってますよ

situmonnsya
質問者

お礼

ありがとございます。 はじめてのHTMLで、いろんなサイトからの「コピペ」で意味も理解できずやってます。 今後もよろしくお願いします。

  • redfox63
  • ベストアンサー率71% (1325/1856)
回答No.1

for文でやるなら for ( i = 0; gg.length; ) {   gg[i].parentNode.removeChild(gg[i]); } といった具合にしましょう i++などと更新処理をしてしまうと 初回は gg[0]を消しますが 2回目の i=1になった時点では元のgg[1]ではなく gg[2]を消そうとします どうしても for文のループ変数更新をしたいのであれば コレクションを後ろから実行しましょう for ( i = gg.length - 1; i > -1; i-- ) {   gg[i].parentNode.removeChild(gg[i]); } といった具合です 関数d を function d() { elements = document.getElementsByTagName("input"); for( i = 0; i < elements.length; i++ ) { elements[i].value = i; } alert(elements.length + "個の要素が見つかりました") } といった具合にしてみると関数Delのどの部分がおかしいのかわかると思いますよ

situmonnsya
質問者

お礼

ありがとうございました。

situmonnsya
質問者

補足

ありがとうございます。 そうだったんですか。 なんと、恥ずかしいです。 ちなみに、parentNode.removeChildの使い方はこれで正しいですか?

関連するQ&A

  • getElementsByNameの要素数が取得できません。(ソース付)

    よろしくお願いします。 getElementsByNameを使って要素数を取得しようとしています。 しかし、tableタグの数が入っていません。 tableタグになる、nameは無効になるのでしょうか? <html> <head> <title>document.getElementsByName - 指定nameのエレメント全取得</title> </head> <!--指定nameのエレメント全取得のサンプル--> <script type="text/javascript"> function getElements() { var elements = document.getElementsByName("test") alert(elements.length + "個の要素が見つかりました") } </script> </head> <body> <input name="test" type="text"><br> <table name="test"></table><br> <input name="test" type="text"><br> <button onclick="getElements()">getElementsByName('test')</button> </html>

    • 締切済み
    • XML
  • javascriptのtextbox

    こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。

  • ループで連続したフォームの値を読み込む

    こんにちは ループで苦労しています。 nameが数字で連続したフォームがいくつかあり、それをループで読み取りたいのです。私が作ったものは以下のものです。でもエラーになります。どこが悪いのかどなたかご教授ください。 <script> function ggo(){ for (i=1; i<=3; i++){ document.write(document.forms["myFORM"].elements["k"+i].value); }} </script> <form name="myForm"> <input type="text" name="k0"><br> <input type="text" name="k1"><br> <input type="text" name="k2"><br> <input type="button" value="hai" onClick="ggo()"> </form> それから、余談ですが以下のスクリプトはループを1回にするとkipをエラー無しで読み込んでくれますが、2回以上にするとエラー表示とともに1度しか読み込んでくれませんなぜなのでしょうか?ひとつの書き込みにに1つの質問が原則なのでこちらの質問に答えていただける方がいらっしゃればそれもとてもありがたいです。欲張ってすいません。 <script> function ggo(){ for (i=0; i<=2; i++){ document.write(document.myForm.kip.value); } } </script> <form name="myForm"> <input type="text" name="kip"><br> <input type="button" value="hai" onClick="ggo()"> </form> ↓参照しました↓ http://oshiete1.goo.ne.jp/qa820843.html

  • domでの削除

    チェックボックスを使ってループで回しながらTRを削除しようとしているんですが、連続でチェックするとうまくいきません。 ご教授宜しくお願いします。 function test() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "checkbox" && inputs[i].checked) { tb1.deleteRow(i); } } }; <table border="1" id="tb1"> <tr> <td><input type="checkbox" name="flag" value=""></td> <td>0</td> </tr>      ・      ・      ・ <tr> <td><input type="checkbox" name="flag" value=""></td> <td>9</td> </tr> </table> <input type="button" value="削除" onclick="test();"><br> }

  • チェックボックスのlengthについて

    チェックボックスで以下のソースでは obj.length=[undefined] と表示されます。1という結果ではないのでしょうか? <script type="text/javascript"> <!-- function test(obj){ alert('obj.length=[' + obj.length + ']'); } // --> </script> <form name="test_form"> <input type="checkbox" name="chk" value="">チェック1 <input type="button" value="テスト" onClick="test(document.test_form.chk)"> </form>

    • ベストアンサー
    • HTML
  • textbox間の結合時、空白の時は、スペースを省きたい

    <script type="text/javascript"> <!-- function ketugou(){     document.f.q.value=document.f.t1.value+" "+document.f.t2.value+" "+document.f.t3.value+" "+document.f.t4.value+" "+document.f.t5.value; } //--> </script> <form name="f"> キーワードを入力:<br> <input type="text" size="55" name="t1"><br> <input type="text" size="55" name="t2"><br> <input type="text" size="55" name="t3"><br> <input type="text" size="55" name="t4"><br> <input type="text" size="55" name="t5"><br> <input type="button" name="connect" value="結合" onClick="ketugou()"><br> 結合時の内容を表示:<br> <input type="txt" name="q" size="55" maxlength="255" ><br> </form> で、空白のテキストボックスの場合は、スペース(" ")なしで、 結合させたいんですが、どうしたら、良いのでしょうか?

  • ラジオボタンが選択された項目のみ操作可能

    ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンはenable 中学校のチェックボックスとボタンはdisabled?readonly? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF() { fOBJ = document.myFORM; RadioNum = 2; // ラジオボタンの数 for (i=0; i<RadioNum; i++) { if (fOBJ["mm"][i].checked) fOBJ["aa"+i].disabled = false; else fOBJ["bb"+i].disabled = true; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form name="myFORM"> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF()">小学校</td> <td><input type="radio" name="mm" onClick="setRTF()">中学校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" />A小学校<br/> <input type="checkbox" name="aa[]" value="2" />B小学校<br/> <input type="checkbox" name="aa[]" value="3" />C小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" />A中学校<br/> <input type="checkbox" name="bb[]" value="2" />B中学校<br/> <input type="checkbox" name="bb[]" value="3" />C中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>

  • チェックボタンの制御方法

    チェックボタンの制御方法で 下記のようなことがやりたいです。 (1)【全ての学校】選択時 【小学校】と【中学校】の全て disabledのままでチェックをセット、ボタンdisabled (2)【小学校】選択時 【中学校】disabledのままでチェックを解除、ボタンdisabled (3)【中学校】選択時 【小学校】disabledのままでチェックを解除、ボタンdisabled もうちょっとだと思うのですが... なかなかうまく出来ないのでよろしくお願いします。 <html> <head> <title></title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】:小学校のみ入力可 (2)ラジオボタン【中学校】:中学校(市立・私立)のみ入力可 (3)ラジオボタン【全ての学校】:小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • Netscapeだと文字化け!

    まずは下記のHTMLをご覧下さい。 <html> <head> <title>tes</title> </head> <SCRIPT LANGUAGE=JAVAScript> <!-- function cp_text( ) { document.fr_test.right.value = document.fr_test.left.value ; } function cp_text1( ) { document.fr_test.right.value = escape(document.fr_test.left.value) ; } function cp_text2( ) { var n = unescape(document.fr_test.right.value) ; document.fr_test.right.value = n; } //--> </SCRIPT> <body> <form name="fr_test"> テキスト1 <input type="text" name="left" size="10" maxlength="10"><BR> テキスト2 <input type="text" name="right" size="10" maxlength="10"><BR><BR> <input type="button" name="btn_tes" value="コピー開始" onclick="cp_text()"><BR> <input type="button" name="btn_bin" value="テキスト2をHEX変換" onclick="cp_text1()"> <input type="button" name="btn_bin" value="テキスト2をDEC変換" onclick="cp_text2()"> </form> </body> </html> ------------------------------------------------ 以上のように記述されたHTMLがあります。 これをNetscapeで起動させるとテキストボックスが2つ表示されます。 ここで「テキスト1」の方に(1)、(2)みたいなコード(ローマ字でしょうか?) これを入力させて下にある「コピー開始」ボタンを押すと テキスト2の方へ値がコピーされてしまうのですが、 ローマ字文字が文字化けしてしまいます。 これをIEで起動すると文字化けはおきないのですが。 これをNetscape上で文字化けを起こさずにコピーすることは できないのでしょうか?

    • ベストアンサー
    • HTML