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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

3096閲覧

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

usawb

総合スコア26

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/12/08 18:53

編集2016/12/09 05:43

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

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

HTML

1<div id="frilis" class="frieria"> 2 <ul> 3 <li><span class="useimg"><img src="IMG/person.png"width=""height=""></span> 4 <span class="myfname">Username</span> 5 <span class="frimenu"> 6 <img src="IMG/menu.png"width=""height=""> 7 </span> 8 </li> 9 <li><span class="useimg"><img src="IMG/person.png"width=""height=""></span> 10 <span class="myfname">Username</span> 11 <span class="frimenu"> 12 <img src="IMG/menu.png"width=""height=""> 13 </span> 14 </li> 15. 16. 17. 18. 19同じ文の繰り返し 20 </ul> 21</div>

Javascript

1var frilisimg = document.querySelectorAll("#frilis .useimg img"); 2 3for(var i =0;i<=frilisimg.length;i++){ 4 (function(i){ 5 frilisimg[i].addEventListener("click",function(){ 6 showFriends(i); 7 },false); 8 9 })(i); 10} 11 12function showFriends(j){ 13 var Farea_P = document.querySelectorAll("#frilis ul li"); 14 var Farea2 = document.querySelector("#frilis ul li #f_area"); 15 16 for(var i=0;i<Farea_P.length;i++){ 17 if(!(i == j)){ 18 if(Farea_Pの配列要素にFarea2の要素が含まれているかどうか){ 19 Farea_P[i].removeChild(Farea2); 20 21 } 22 23 } 24}

###試したこと
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); } } } }

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

JavaScript

1var Farea_P = document.querySelectorAll("#frilis ul li"); 2var Farea2 = document.querySelector("#frilis ul li #f_area"); 3if ( Farea_P[1].querySelector("li > #f_area") ) { //li がネストしていたら( #frilis ul li ul li > #f_area がある場合 )意図しない箇所を取得する可能性有り 4 console.log( 'true' ); 5 Farea_P[1].removeChild(Farea2); 6} else { 7 console.log( 'false' ); 8} 9```**動くサンプル:**[https://jsfiddle.net/vhgr5xf2/2/](https://jsfiddle.net/vhgr5xf2/2/) 10 11--- 12 13ベストアンサーを選ぶ前に、コメントで状況を伝えるなりすればよいので、わからなかったらまずコメントをください。 14 15--- 16 17**追記:** 18 19「同じようなエラー」ではなく出たエラーをエラー文のまま提示したほうが状況が伝わりますよ。 20 21 22```JavaScript 23var frilisimg = document.querySelectorAll( "#frilis .useimg img" ); 24for ( var i =0; i < frilisimg.length; i++ ) { 25 // ↑そもそもこれが原因でエラーが起きている。0番から数えているから frilisimg.length 以下で良い。 26 ( function( i ){ 27 frilisimg[ i ].addEventListener( "click", function() { 28 showFriends( i ); 29 }, false ); 30 } )( i ); 31} 32function showFriends( j ) { 33 var Farea_P = document.querySelectorAll( "#frilis ul li" ); 34 var Farea2 = document.querySelector( "#frilis ul li #f_area" ); 35 for ( var i = 0; i < Farea_P.length; i++ ) { 36 if ( !( i == j ) ){ 37 if ( Farea_P[ i ].querySelector( "li > #f_area" ) ) { 38 Farea_P[ i ].removeChild( Farea2 ); 39 } 40 } 41 } 42} // ← これが少なかった 43```**動くサンプル:** 44[https://jsfiddle.net/vhgr5xf2/3/](https://jsfiddle.net/vhgr5xf2/3/) 45

投稿2016/12/08 19:10

編集2016/12/08 20:05
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usawb

2016/12/08 19:29

たびたびありがとうございます。Farea_P[1].querySelector("li > #f_area")をFarea_P[i].querySelector("li > #f_area")に変更してやってみたのですが、やはり同じようなエラーが出てしまい、できませんでした、、、。
kei344

2016/12/08 20:05

回答に追記をしたので、それを御覧ください。
usawb

2016/12/08 20:29

申し訳ありませんでした。あと、ご指摘の通りに直したのですが、GoogleChromeでは"frilist.js:224 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.(…)"というエラーが出て上手く動作しません。
usawb

2016/12/08 20:35

追記:frilisimg要素をクリックした後に、それ以降の他のfrilisimg要素をクリックした場合は正常に動くようです。frilisimg要素をクリック後、それ以前のfrilisimg要素をクリックするとエラーが出ているようです。
usawb

2016/12/09 02:26

試しました。動くサンプルで実行すると動くのですが、私のプログラムにkei344様のそのコードを導入したらエラーが出てしまっています。
kei344

2016/12/09 02:29

「私のプログラム」の JavaScript を質問文に「追記」してください。(決して元のコードを消さないでください)
usawb

2016/12/09 04:11

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

2016/12/09 06:10

https://jsfiddle.net/vhgr5xf2/4/ とりあえず(エラーは放っといて)動かしてみましたが、そもそも設計に問題があるような。要素を動的に作ること自体は必要のあることはありますが、同じ要素を2回クリックすると2回動的に生成されることになります。 jQueryとかで動的な追加や表示の切り替え、イベント処理を作り直したほうが(簡単なので)良いと思います。
usawb

2016/12/09 06:24

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

0

素朴なギモンですが
"#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 05:59

編集2016/12/09 06:02
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usawb

2016/12/09 06:26

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

2016/12/09 06:39

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

2016/12/09 08:56

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

0

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

投稿2016/12/12 17:42

usawb

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

javascript

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

投稿2016/12/11 07:35

lazex

総合スコア604

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usawb

2016/12/12 17:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問