Javascriptで要素が存在するかどうか知りたいです。

Question

###前提・実現したいこと

javascriptで取得したHTML要素があるかどうかを調べたいです。

###発生している問題・エラーメッセージ

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

###該当のソースコード
HTML

        <div id="frilis" class="frieria">
            <ul>
                <li><span class="useimg"><img src="IMG/person.png"width=""height=""></span>
                    <span class="myfname">Username</span>
                    <span class="frimenu">
                        <img src="IMG/menu.png"width=""height="">
                    </span>
                </li>
                <li><span class="useimg"><img src="IMG/person.png"width=""height=""></span>
                    <span class="myfname">Username</span>
                    <span class="frimenu">
                        <img src="IMG/menu.png"width=""height="">
                    </span>
                </li>
.
.
.
.
同じ文の繰り返し
      </ul>
</div>

JavaScript

var frilisimg = document.querySelectorAll("#frilis .useimg img");

for(var i =0;i<=frilisimg.length;i++){
    (function(i){
        frilisimg[i].addEventListener("click",function(){
            showFriends(i);
        },false);

    })(i);
}

function showFriends(j){
    var Farea_P = document.querySelectorAll("#frilis ul li");
    var Farea2 = document.querySelector("#frilis ul li #f_area");

    for(var i=0;i<Farea_P.length;i++){
        if(!(i == j)){
            if(ここにFarea2で取得した要素がある場合){
                Farea_P[i].removeChild(Farea2);

            }            

        }
}

###試したこと
if(Farea2 !== null)
if(!!Farea2 )
などを試したのですが、Farea2がある場合もない場合もif文が実行され、removeChildで削除するノードが見つからず、実行できませんでした。というエラーが出てしまいます。
###補足情報(言語/FW/ツール等のバージョンなど)
説明が下手くそですいません、困っているので、ぜひ教えていただきたいです。

Answer 1

var Farea2 = document.querySelector("#frilis ul li #f_area");
if ( Farea2 ) {
	console.log( 'true' );
} else {
	console.log( 'false' );
}
```**動くサンプル：**[https://jsfiddle.net/vhgr5xf2/](https://jsfiddle.net/vhgr5xf2/)

Comments

[usawb]

回答ありがとうございます。if(Farea2)でやってみたのですが、うまくいかなかったので、別の原因があるんだと思います。せっかく答えていただいたのに申し訳ありません。改めて原因が分かり次第もう一度投稿します!

[kei344]

よく見てなかった。分岐部分が問題なのではなくて、Farea2 に要素があるときに Farea_P にはいっている全ての要素に対して Farea_P[i].removeChild(Farea2); をしているので、

「あなたはうちの子ではありません」

と言われているのでは。たとえば、liが10個有って5個目のliに #f_area がある場合、4個目までのliではエラーが起きます。

[kei344]

あと、#f_area が li要素の直下にないとどのみちエラーになりますね。
var Farea2 = document.querySelector("#frilis ul li > #f_area");

https://jsfiddle.net/vhgr5xf2/1/

[usawb]

そういうことでしたか！わざわざありがとうございます。自分なりに解決策を考えてもう一度投稿してみたのですが、もしよろしければぜひ見ていただきたいです。