質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.04%

Javascriptで親要素から指定した子要素が存在するかどうか調べたいです。

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 948

usawb

score 23

前提・実現したいこと

javascriptで取得したHTML要素の配列に指定したidの要素が存在するかどうかを調べて、存在する場合と、しない場合でif文で条件分岐したいです。

該当のソースコード

<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>
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(Farea_Pの配列要素にFarea2の要素が含まれているかどうか){
                Farea_P[i].removeChild(Farea2);

            }            

        }
}

試したこと

if(Farea_P[i]の中にFarea2があるかどうかをforループで調べ、存在する場合はFarea2を削除するという感じにしたいです。
ここでは省略していますが、クリックされると必ずクリックされた要素にFarea2の要素が追加されるようにしています。そのため、if(Farea2)という形にすると必ず存在するため要素が含まれていないものも、Farea_P[i].removeChild(Farea2)の文が実行されるため、エラーが出ることが分かりました。

補足情報(言語/FW/ツール等のバージョンなど)

説明が下手くそですいません、困っているので、ぜひ教えていただきたいです。

var mayFlist = document.querySelectorAll("#frilis ul li");
var blolisimg = document.querySelectorAll("#blolis li img");
var hihyolisimg = document.querySelectorAll("#hihyolis li img");
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 Frilist = document.querySelectorAll("#frilis ul li");
    var Farea = document.createElement("div");
    var Fareamenu = document.createElement("div");
    var Fmain = document.createElement("div");
    var Fsetting = document.createElement("div");
    var Fface = document.createElement("div");
    var Ffavo = document.createElement("div");
    var Fname = document.createElement("div");
    var Fcare= document.createElement("div");
    var Careimg = document.createElement("div");
    var Fchat = document.createElement("div");
    var Chatimg = document.createElement("div");
    var Friset = document.createElement("div");
    var Frisetarea= document.createElement("div");
    var Friblo = document.createElement("div");
    var Frihihyo = document.createElement("div");
    var Canbut = document.createElement("div");
    var CloseFri = document.createElement("div");

    var Uname = document.createElement("span");
    var Namem = document.createElement("span");
    var Okimg = document.createElement("span");

    var Pname = document.createElement("p");
    var Setimg = document.createElement("img");
    var Personimg = document.createElement("img");
    var Starimg = document.createElement("img");
    var Penimg = document.createElement("img");
    var Noimg = document.createElement("img");
    var Snoimg = document.createElement("img");
    var Plusimg = document.createElement("img");
    var Pluschatimg = document.createElement("img");
    var Closeimg = document.createElement("img");


    Farea.id="f_area";
    Fareamenu.id="f_areamenu";
    Fmain.id="f_main";
    Fsetting.id="f_setting";
    Fface.id ="f_face";
    Ffavo.id ="f_favo";
    Fname.id = "f_name";
    Fcare.id="f_care";
    Fchat.id = "f_chat";
    Friset.id="friset";
    Frisetarea.id="frisetarea";
    CloseFri.id="closefri";

    Uname.classList.add("user_name");
    Namem.classList.add("name_m");
    Okimg.classList.add("ok_img");
    Careimg.classList.add("careimg");
    Chatimg.classList.add("chatimg");
    Friblo.classList.add("friblo");
    Frihihyo.classList.add("frihihyo");
    Canbut.classList.add("canbut");

    Setimg.src = "IMG/setting.png";
    Personimg.src = "IMG/person.png";
    Starimg.src = "IMG/star3.png";
    Penimg.src = "IMG/pen.png";
    Noimg.src = "IMG/No.png";
    Plusimg.src = "IMG/pluscalendar.png";
    Pluschatimg.src = "IMG/chat.png";
    Snoimg.src = "IMG/No.png";
    Closeimg.src = "IMG/No.png";

    Frilist[j].style.position = "relative";
    Frilist[j].appendChild(Farea);
    Farea.appendChild(Fareamenu);
    Fareamenu.appendChild(Fmain);
    Fareamenu.appendChild(Fname);
    Fareamenu.appendChild(Fcare);
    Fareamenu.appendChild(Fchat);
    Fareamenu.appendChild(Friset);
    Fareamenu.appendChild(CloseFri);

    Fmain.appendChild(Fsetting);
    Fmain.appendChild(Fface);
    Fmain.appendChild(Ffavo);

    Fsetting.appendChild(Setimg);
    Fface.appendChild(Personimg);
    Ffavo.appendChild(Starimg);

    Fname.appendChild(Pname);
    Pname.appendChild(Uname);
    Pname.appendChild(Namem);
    Pname.appendChild(Okimg);

    Uname.innerHTML = "UserName";
    Namem.appendChild(Penimg);
    Okimg.appendChild(Noimg);

    Fcare.appendChild(Careimg);
    Fchat.appendChild(Chatimg);

    Careimg.appendChild(Plusimg);
    Chatimg.appendChild(Pluschatimg);

    Friset.appendChild(Frisetarea);
    Frisetarea.appendChild(Friblo);
    Frisetarea.appendChild(Frihihyo);
    Frisetarea.appendChild(Canbut);

    Friblo.innerHTML = "ブロック";
    Frihihyo.innerHTML = "非表示";
    Canbut.appendChild(Snoimg);
    CloseFri.appendChild(Closeimg);

    var favo = document.querySelector("#f_favo img");
    var pen = document.querySelector("#f_name img");
    var u_name = document.querySelector(".user_name");
    var u_set   = document.querySelector("#f_setting img");
    var u_setmenu = document.querySelector("#friset");
    var ok_img = document.querySelector(".ok_img");
    var cancel = document.querySelector(".canbut");
    var count1 = 0;
    var count2 = 0;
    var count3 = 0;
    var bfore_value = u_name.innerHTML;

    favo.addEventListener("click",function(){
        if(count1 == 0){
            favo.src = "IMG/star4.png";
            count1++;
        }else if(count1 == 1){
            favo.src = "IMG/star3.png";
            count1--;
        }

    },false);
    pen.addEventListener("click",function(){
        if(count2 == 0){
            f_name = u_name.innerHTML;

            u_name.innerHTML = "<input class=\"user\"autofocus name=\"u_name\"maxlength=\"10\">";
            friname = document.querySelector(".user");
            friname.value = f_name;
            friname.type = "text";
            pen.src = "IMG/check.png";
            ok_img.style.display = "inline-block";

            count2++;
        }
        else if(count2 == 1){
            uvalue = friname.value;
            if(!uvalue){
                u_name.innerHTML = bfore_value;
            }else if(uvalue){
                u_name.innerHTML = uvalue;

            }

            bfore_value = u_name.innerHTML;

            pen.src= "IMG/pen.png";
            ok_img.style.display = "none";


            count2--;
        }
    },false);
    u_set.addEventListener("click",function(){
        if(count3 == 0){
            u_setmenu.style.display = "block";
            count3++;
        }else if(count3 == 1){
            u_setmenu.style.display = "none";
            count3--;
        }
    },false);
    cancel.addEventListener("click",function(){
        u_setmenu.style.display = "none";
        count3--;
    },false);

    ok_img.addEventListener("click",function(){
        u_name.innerHTML = bfore_value;
        pen.src= "IMG/pen.png";
        ok_img.style.display = "none";
        count2--;


    },false);

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

    CancelB = document.querySelector("#f_area #closefri");
    CancelB.addEventListener("click",function(){
        Farea_P[j].removeChild(Farea2);

    },false);


    for(var i=0;i<Farea_P.length;i++){
        if(!(i == j)){
            if(Farea_P[i].querySelector("li >  #f_area")){

                Farea_P[i].removeChild(Farea2);
            }
        }
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+1

var Farea_P = document.querySelectorAll("#frilis ul li");
var Farea2 = document.querySelector("#frilis ul li #f_area");
if ( Farea_P[1].querySelector("li > #f_area") ) { //li がネストしていたら( #frilis ul li ul li > #f_area がある場合 )意図しない箇所を取得する可能性有り
    console.log( 'true' );
    Farea_P[1].removeChild(Farea2);
} else {
    console.log( 'false' );
}

動くサンプル:https://jsfiddle.net/vhgr5xf2/2/


ベストアンサーを選ぶ前に、コメントで状況を伝えるなりすればよいので、わからなかったらまずコメントをください。


追記:

「同じようなエラー」ではなく出たエラーをエラー文のまま提示したほうが状況が伝わりますよ。

var frilisimg = document.querySelectorAll( "#frilis .useimg img" );
for ( var i =0; i < frilisimg.length; i++ ) {
        // ↑そもそもこれが原因でエラーが起きている。0番から数えているから frilisimg.length 以下で良い。
    ( 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 ( Farea_P[ i ].querySelector( "li > #f_area" ) ) {
                Farea_P[ i ].removeChild( Farea2 );
            }
        }
    }
} // ← これが少なかった

動くサンプル:
https://jsfiddle.net/vhgr5xf2/3/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/09 13:11

    質問文の一番下に追記いたしました。

    キャンセル

  • 2016/12/09 15:10

    https://jsfiddle.net/vhgr5xf2/4/

    とりあえず(エラーは放っといて)動かしてみましたが、そもそも設計に問題があるような。要素を動的に作ること自体は必要のあることはありますが、同じ要素を2回クリックすると2回動的に生成されることになります。

    jQueryとかで動的な追加や表示の切り替え、イベント処理を作り直したほうが(簡単なので)良いと思います。

    キャンセル

  • 2016/12/09 15:24

    ありがとうございます、二回クリックの件は真偽値で制御しようと考えていました。まだ動的なコードの設計をほとんどしたことがなかったので、おろそらく自分でも問題があると思っています(笑)クリックされた要素に追加して、常に一つだけの要素が表示されるというものが作りたかったです

    キャンセル

+1

素朴なギモンですが
"#frilis ul li"に"#frilis ul li #f_area"が含まれるかどうかは
"#frilis ul li #f_area"だけ直接チェックすればよくないですか?
これでヒットするなら#f_areaなオブジェクトは
かならず親の"#frilis ul li"の中にいるわけですから

var Farea2 = document.querySelector("#frilis ul li #f_area");
if(Farea2!=null){
 Farea2.parentNode.removeChild(Farea2);
}

的な?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/09 15:26

    コメントありがとうございます。クリックされた場合常に一つはFarea2は存在しているので、そうしてしまうと、全てのFarea2が消えてしまうことになってしまいます。

    キャンセル

  • 2016/12/09 15:39

    #f_areaはidですからそのページに一つしかないので問題ないのでは?
    万が一一時的にしろ#f_areaが混在するような運用であれば、
    まずは#f_areaのidを#f_area-dummy的なものにかえてから
    あらたに#f_areaを追加し#f_area-dummyを削除するとか
    運用でカバーするとよいのでは?

    キャンセル

  • 2016/12/09 17:56

    なるほどです。やってみます。

    キャンセル

0

Array.from(Farea_P).forEach((e, i) => i !== j && e.contains(Farea2) && Farea2.remove())

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/13 02:40

    コメントありがとうございます。この問題すでに解決しておりました。申し訳ありません

    キャンセル

0

関数の一番初めに、Farea_P[ i ].removeChild( Farea2 );を行い全てのFarea2を削除してその後Farea2を作成する方法で解決することができました!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる