Edited at

JavaScriptでHTMLNodeを除外したかった

More than 1 year has passed since last update.

標準のremoveChild()の動きに納得いかないんですけど何がいけないんですか(憤怒)


現状


材料


元のhtml

<div id="test">

<div id="wannaDel"> ←消したい
hogefugapiyo
</div>
<div id="donotDel1"> ←消したくない(省略したけど同じ階層に沢山ある)
foobarbaz
:
</div>
</div>


を、こう操作するとよいと言われる。

let result = document.getElementById('test').

removeChild(document.getElementById('wannaDel'))


期待した動作


理想(result.innerHTML)

<div id="test">

<div id="donotDel1"> ← #wannaDel が消えて他が残る
foobarbaz
:
</div>
</div>


実際の動作


現実

<div id="wannaDel">  ←そっちが残るの??????

hogefugapiyo
</div>


なんとかした


せいきひょうげんのちからってすげー

let result = document.getElementById('test').innerHTML.

replace(/<div id="wannaDel">[^]*<\/div>/, '')


課題


  • 空白が残る

  • HTMLNodeのまま処理したい。したくない?

  • (実運用ではコメントなど追加情報もRegExpに書いたから何とかなったけど)予期せぬ</div>タグで反応する可能性がある


絶対まともな方法じゃないから誰か助けてください。