javascriptのは子供

Question

htmlコード

<li id="ioAddOtherRelation"> 
      <a href="" onclick="return ioAddSetOtherRelation()"class="smallLink">add other relation</a> 
</li> 

を削除し、私は機能ioAddSetOtherRelationはjavascriptのコード

function ioAddSetOtherRelation(){ 
    var bigLi = document.getElementById('ioAddOtherRelation'); 
    bigLi.removeChild(bigLi.childNodes[0]); 
    return false; 
} 

私が最初にリンクを押すと、何もタグ

を削除したいです起こったが、私はそれを2回押したときに、それはタグを削除し、私はワンクリックでタグを削除したい

Answer 1

問題があることが、あなたの「李」要素の最初の子であることを確認することを取るなどのパラメータを送信実際には、それ自身と 'a'要素の間の改行と空白を含むtextNodeです。初めてクリックすると、この目に見えないtextNodeが削除され、もう一度「a」をクリックすると削除されます。

あなたは、改行や空白を（すなわち、スペースを入れずに1行にすべてのHTMLを置く）を除去することによって、これを証明することができます - あなたは「」最初のクリックで消えるはずです。

私はあなたが意図したとおり、以下の修正はJavaScriptが働いたことがわかりました。私は、.getElementsByTagName（）を使って 'a'要素だけが返されることを確認しました。これは.childNodesのような配列を返すので、結果の配列の最初の要素をとっています。

  function ioAddSetOtherRelation() { 
      var bigLi = document.getElementById('ioAddOtherRelation'); 
      bigLi.removeChild(bigLi.getElementsByTagName("a")[0]); 
      return false; 
     } 

は、私は（（）JSコードの行console.debugと一緒に）この問題を解決する上で非常に有用であることが放火犯を発見した - あなたはすでに私はそれが行くを与えるお勧めしたいことを使用していない場合は！

Answer 2

最初にクリックしたときに、エレメントの前のスペースを含むテキストノードが削除されました。 removeChildに渡す引数が実際に必要なものであることを確認する必要があります。

これが問題に正気なアプローチのようになります。

<li id="ioAddOtherRelation"> 
    <a href="" onclick="return ioAddSetOtherRelation(this)" class="smallLink">add other relation</a> 
</li> 

function ioAddSetOtherRelation(element){ 
    var bigLi = element.parentNode; 
    bigLi.removeChild(element); 
    return false; 
} 

固有のイベント属性の退治とunobtrusive JavaScriptを書くことは、より良いまだだろう。

Answer 3

使用jQueryとthis

がioAddSetOtherRelation機能でthis

は、あなたが投稿したコードとhere