- ベストアンサー
remove()で削除要素の再作成ができない
amanojaku1の回答
- amanojaku1
- ベストアンサー率54% (265/488)
HTMLタグだと正常に書き込めない場合があるようです(^_^;) そちらのソースとは関係ありませんが、下記は「innerHTML」のテスト用のソースです。 「Chrome」にて何度も「表示／消去」が正常に動作します。 まず、(いきなり難しいソースにしないで)簡単なソースでチェックしてみたらどうでしょうか？ <html> <head> </head> <body> <input id="btn" type="button" value="表示／消去"> <p id="hoge">hoge</p> <script type="text/javascript"> <!-- document.getElementById('btn').addEventListener('click', function() { if(''==document.getElementById('hoge').innerHTML){ document.getElementById('hoge').innerHTML = 'piyo'; }else{ document.getElementById('hoge').innerHTML = ''; } }, false); // --> </script> </body> </html>
関連するQ&A
- dblclickでdiv要素を一回だけ作成したい。
javascriptで、dblclickでcreateElementを使いdiv要素を作成してappendChildでbodyの部分にdiv要素を挿入することを考えています。 （この部分は自分で解決できました。） この際、dblclickのたびにdiv要素を挿入するのではなく、すでにdblclickでdiv要素が挿入されている場合にはdiv要素を改めて挿入しないようにしたいのですが、どのようにすれば改めてdiv要素を挿入しないようにできるのでしょうか。 javascript初心者です。宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptで要素の構造を生成
昨日質問したプログラムの続きなんですが、 実はクリックした画像を大きくしたくてその方法を考えています function getElements ( obj ) { //イメージタグここから var src = obj.getAttribute('src'); var element = document.createElement('img'); element.src = src; //div生成 var box = document.createElement('div'); box.style.position = 'fixed'; box.class = 'photobig'; box.style.top = '50%'; box.style.left = '50%'; box.style.width = '900px'; box.style.height = '600px'; box.style.background = '#000000'; box.style.opacity = '0.7'; box.style.marginTop = '-300px'; box.style.marginLeft = '-450px'; box.innerHTML = element;//←ここが問題 var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(box); // body要素にdivエレメントを追加 // var objPhotobox = document.getElementsByClassName("photobig").item(0); // objPhotobox.appendChild(element); } javascriptでdivを生成し、その中にimgタグで画像を入れようとしています appendChildで生成した後で、innerHTMLにimgタグの情報を入れようとしています innerHTMLに変数をいれてもタグとして生成されないのが分かったところで、 divにクラス名を付けてそのクラスにappendChildしてみたんですが、これもダメでした どうすればよいのか見当つかず困っています 生成した後のものを扱うのが難しそうなので一度にすべて生成するようにするのかなと思いつつやり方がわかりません よろしくお願いします
- ベストアンサー
- JavaScript
- chart.js tooltipに表示要素を追加
chart.jsを使用して、添付の画像のような折れ線グラフを作成しています。 グラフにマウスを当てた際、ツールチップを使用して、X軸とY軸の値に設定した内容が表示されるようになりましたが、X軸、Y軸と関係のないちょっとしたコメントを載せたいと思っています。 以下、作成しているJSです。 --------------------- var comment = [ "コメント1", "コメント2", "コメント3", "コメント4", ]; var chart = new Chart(ctx, { type: 'line', data: { labels: [ ['1期','2018'], ['2期','2019'], ['3期','2020'], ['4期','2021'] ], datasets: [ { label: '青', borderColor: 'rgb(84, 142, 242)', fill: false, data: [3521, 5323, 8442, 2535], }, { label: 'オレンジ', borderColor: 'rgb(248, 120, 35)', fill: false, data: [1023, 1953, 1274, 1534] } ] }, options: { 以下省略 tooltips: { // キャンバス上のツールチップを無効にする enabled: false, custom: function(tooltipModel) { // ツールチップ要素 var tooltipEl = document.getElementById('chartjs-tooltip'); // 最初のレンダリング時に要素を作成する if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjs-tooltip'; tooltipEl.innerHTML = "<div class='myChart_contents'>"; document.body.appendChild(tooltipEl); } // ツールチップがない場合は非表示にします if (tooltipModel.opacity === 0) { tooltipEl.style.opacity = 0; return; } // キャレット(ツールチップが指し示すもの)の位置を設定する tooltipEl.classList.remove('above', 'below', 'no-transform'); if (tooltipModel.yAlign) { tooltipEl.classList.add(tooltipModel.yAlign); } else { tooltipEl.classList.add('no-transform'); } function getBody(bodyItem) { return bodyItem.lines; } // テキストを設定する if (tooltipModel.body) { var titleLines = tooltipModel.title || []; var bodyLines = tooltipModel.body.map(getBody); var innerHtml = ''; //タイトル titleLines.forEach(function(title) { innerHtml += '<p class="myChart_term">第' + title.replace(",", "（") + '年度）</p>'; }); //コメント bodyLines.forEach(function(body, i) { innerHtml += '<p class="myChart_comment">' + comment[i] + '</p>'; }); //Y軸 innerHtml += '<table class="myChart_value"><tbody>'; bodyLines.forEach(function(body, i) { innerHtml += '<tr><td>' + body[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '人</td></tr>'; //y軸 //innerHtml += '<tr><td>' + body + '人</td></tr>'; //y軸 }); innerHtml += '</tbody></table>'; var tableRoot = tooltipEl.querySelector('div'); tableRoot.innerHTML = innerHtml; } 以下省略 } } } }); --------------------- 現状、グラフにマウスを載せると以下のような表示がされ、 コメント部分はすべて「コメント1」と表示されます。 第1期（2018年度） コメント1 青:3521人 第2期（2019年度） コメント1 青:5323人 第2期の場合は「コメント2」、第3期の場合は「コメント3」と表示されるようにしたいのですが、 どのように作成したら良いか分からず、ご教示いただけると幸いです。
- ベストアンサー
- JavaScript
- イベントリスナーがうまくいかない
delBtnがない場合にイベントリスナーを読み込むとエラーが出てその後の処理が行われないため 下記のようにあった場合のみ予約するようにしたところ今度はクリックしても実行されない問題が起きました。 読み込み時は、エラーにならないようにし、かつボタンを押したときに要素を削除するようにするにはどうしたらよいでしょうか？ var Result = document.getElementsByClassName('Result')[0].innerHTML = '<span class="u-mr-1rem">あああああ</span><input id="DelBtn" type="button" value="削除">; var Result = document.createElement('p'); BtnWrap.appendChild(Result); Result.classList.add('Result u-mtb-1rem'); var delBtn = document.getElementById('DelBtn'); if(delBtn !== null) { delBtn.addEventListener('click', function() { document.getElementsByClassName('Result')[0].remove(); }); }
- 締切済み
- JavaScript
- ドラッグできるエレメントを複数作成
フォームのテキスト入力枠から入力した文字を div要素の中に入れて、そのdiv要素をドラッグできるように したいのです。 ドラッグ要素の作成にはAjaxライブラリの「bytefx_OS.js」を 使っています。 今下記のようにソースを書いています。 ＝＝＝＝＝＝＝＝＝＝＝＝＝ var txtnum = 0; function apptxt() { var uptxt1 = document.forms["txtup"].txt1.value; var newDiv = document.createElement("div"); newDiv.position = "relative"; newDiv.style.color = "#000000" ; newDiv.style.fontSize = 12; newDiv.style.cursor = "move" ; newDiv.id = "txt" + txtnum ; newDiv.innerHTML = uptxt1 ; document.getElementById("txtbox").appendChild(newDiv) ; bytefx.drag(document.getElementById("txt" + txtnum)); document.forms["txtup"].txt1.value = ""; txtnum = ++txtnum ; } ----- <div id="txtbox"> <form name="txtup"> <input type="text" name="txt1" size="40"> <input type="button" name="txt" value="文字を入力する" onclick="apptxt();"> </form> </div> ＝＝＝＝＝＝＝＝＝＝＝＝＝ これだと、１回目に入力してできた div要素はドラッグできるのですが ２回目以降にできるdiv要素のドラッグができません。 （div要素だけは作成されるのですが） どうすれば２回目以降のdiv要素もドラッグができるようになるのか 分かる方がいたらお教えください。お願いします。
- ベストアンサー
- JavaScript
- ホームページビルダー８で作成中のページを削除もしくは変更するには
一年以上ぶりにこちらを利用してご質問させていただきます。 ＨＰ作成初心者にはビルダーが良いと聞き、最近作り始めたのですが、サブページに日記を作成した際に、フレームを二つに分けました。（左：ホームへなどのボタン設定、右：日記） 全体の確認でタイトルページ、数枚のほかのサブページすべてに日記サブページで作成した左側のボタンのフレームが出てきます。ほかのページにフレームを出したくないときはどのようにしたらいいのでしょうか？わからないからいったんこの日記サブページだけ削除しようとしたのですが、うまく削除もできなくて削除自体も今後の為に教えていただきたく。 あともうひとつ、（よくばりですみません）素材集の中のボタンとかいろいろありますよね？ボタンをクリックすると（たとえばホームへなどの）ホームに戻ったりするように設定するにはどのようにしたらいいのでしょうか？説明書にはすべてリンクの設定で「ホームへ」などと文字をクリックするようになってましたので。長くなりましたが宜しくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- HashSetのremoveで例外発生します
JavaでObjectの保存メソッドを作成したのですが、「java.util.ConcurrentModificationException : null」が発生します。 処理としては、引数のObjectが持っている情報(リスト)と本来登録すべきデータリストを照らしあわせ、追加する必要があるものはaddオブジェクトに削除する必要があるものはdelオブジェクトに残すようにし、最終的にDBデータの追加、削除を実行しています。 おそらく、delHogeIdSet.removeの記述の問題なのではと思ってはいるのですが、改変する良い方法がわかりません。 Hash自身をチェックしてremoveするならiteratorでよいのかもしれませんが、チェックする対象は別オブジェクトなので。。。 removeするたびに各Hashをチェックしてremoveするメソッドを別に作ることでも実現できるかもとは思っていますが、あまりスマートじゃないように思うのです。 上のような方法しかないでしょうか？？ 他に良い方法があれば教えていただけないでしょうか。よろしくお願いします。 @Override public void saveObject(ObjectDto objectDto) { Object object = objectDto.object; objectDao.saveOrUpdate(object); // DB登録済みのObjectHogesのHogeを削除用リストとしてセットしておく HashSet<Long> delHogeIdSet =null; delHogeIdSet = objectHogeDao.geHogeIdSetByObjectId(object.getObjectId()); // ObjectのHogeSetからセットすべきのHoge一覧を取得する List<HogeSetHoge> hogeSetHogeList = hogeSetHogeDao.loadByHogeSet(object.getHogeSet().getHogeSetId()); // 追加用Hogeリストをセットしておく HashSet<Long> addHogeIdSet =null; addHogeIdSet = hogeSetHogeDao.getHogeIdSetByHogeSetId(object.getHogeSet().getHogeSetId()); if(object.getObjectHoges() != null){ // ユーザのHogeを順にチェック for(ObjectHoge objectHoge : object.getObjectHoges()){ // セットすべきHoge一覧と比較 for(HogeSetHoge hogeSetHoge : hogeSetHogeList){ // ユーザのHogeと登録が必要なHogeを比較 if(hogeSetHoge.getHoge().getHogeId() == objectHoge.getHoge().getHogeId()){ // dbに登録されている場合は削除リストならびに追加リストからはずす delHogeIdSet.remove(hogeSetHoge.getHoge().getHogeId()); addHogeIdSet.remove(hogeSetHoge.getHoge().getHogeId()); } } } // delObjectHogeListをDBから削除する if(delHogeIdSet.size() > 0){ for (Long hogeId : delHogeIdSet){ // objectHogeDao.deleteByHogeId(hogeId,object.getObjectId()); } } // addHogeIdSetをDBに追加する if(addHogeIdSet.size() > 0){ for (Long hogeId : delHogeIdSet){ ObjectHoge objectHoge = new ObjectHoge(); objectHoge.setObject(object); Hoge hoge = hogeDao.findById(Hoge.class, hogeId); objectHoge.setHoge(hoge); objectHogeDao.saveOrUpdate(objectHoge); } } }
- ベストアンサー
- Java
- datalistのoptionの削除はできますか？
こんにちは。 今、htmlとJavascriptでinput要素の入力欄に入力した値を追加ボタンを押すとdatalistの入力候補に追加され、削除ボタンを押すと入力候補から値を削除するソースを作成しています。 入力候補から指定した値を削除するソースの書き方で困っています。 selectのoptionを削除する方法はネットでもたくさん紹介されていますが、datalistのoption削除はありませんでした。 方法をご存知の方はやり方をご教授ください。 よろしくお願いします。
- 締切済み
- JavaScript
- 動的に作成したコントロールの削除方法
はじめまして。 現在ASP.net でweb画面を作成していますが、動的に作成したコントロールの削除が不規則な動きをしており困り果ててこちらにきました。よろしくお願いします。 配置してあるテーブルに行だけを動的に追加しており その行には、テキストボックスと削除ボタンが含まれています。 不規則な動きというのは、以下になります。 1行目の削除ボタンを押す→1行目が消える 1行目になった削除ボタンを押す→変化なし 1行目の削除ボタンを押す→末尾の行が消える という状態です。デバッグで確認すると、 Removeで消しているコントロールIDは確かに1行目のものなのに、 画面が開くとそれが残っているという現象です。 そしてなぜ末尾が途中から消されていくのかは分かりません。 もしかして思うのは、毎回Loadで動的に生成しているため、 削除ボタンが押されたときもLoad一度生成したものをイベントハンドラで削除しようとしていておかしくなるのかなという気もしますが、 毎回生成しないとコントロール自体が消えてしまい、Loadでなくイベントハンドラで生成するようにすると、今度は入力値が消えてしまいます。 ソースは以下になります。（一部抜粋） とても困っています。宜しくお願いします。 'テーブルの枠だけデザイナで作成しておく <table id="tblDynamic" runat="server" enableviewstate="false"> </table> 'ロード Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load ’配置してあるテーブルに行を動的に追加する For rowCnt As Integer = 1 To 10 tblFormat.Rows.Add(retCreateRow(rowCnt)) Next End Sub ’テーブルの行（コントロールを含む）を作成して返す関数 Function retCreateRow(rowCnt As Integer) As HtmlTableRow Dim tr As New HtmlTableRow Dim cel1 As New HtmlTableCell Dim cel2 As New HtmlTableCell Dim txt As New TextBox Dim btn As New ImageButton txt .ID = "txt " & "_" & rowCnt cel1.Controls.Add(txt) tr.Cells.Add(cel1) btn.ID = "btn" & "_" & rowCnt btn.text="行削除" AddHandler btn.Click, New System.Web.UI.ImageClickEventHandler(AddressOf btnDelete_btnInsert) cel2.Controls.Add(btn) tr.Cells.Add(cel2) Return tr End Function '行削除イベントハンドラ Private Sub btnDelete(ByVal sender As System.Object, ByVal e As System.EventArgs) Dim ControlIdx = Split(CType(sender, ImageButton).ID, "_")(1) 'この削除ボタンがある行Indexを取得 For HitIdx As Integer = 1 To tblFormat.Rows.Count If Not IsNothing(tblFormat.Rows(HitIdx).FindControl(CType(sender, ImageButton).ID)) Then 'あった！この行を削除する Me.tblFormat.Rows.RemoveAt(HitIdx) Exit For End If Next End Sub
- ベストアンサー
- Visual Basic
- ブログのボタン
jsなどで添付画像のようなブログでよくある 「ボタンをクリックするとhtmlタグが挿入される」 物を作りたいのですが、どのように作ればよいか＆検索ワードがわかりません。 教えていただけませんか？ 例えば、 if(イタリックが選択されれば) ｛ 要素の作成 ｝ else if(もう一度押されれば) ｛ 上記の終了タグを追加 ｝ みたいな感じでしょうか？
- ベストアンサー
- JavaScript
お礼
if(''==document.getElementById('hoge') こんな書き方もできるのですね。hogeが空だったら真という事ですね。 確かにこれはできるのですが、本題の方が解決しませんのでお願いします。
補足
delBtn.addEventListener('click', function() { の部分にローカルストレージに何も入っていない状況ですと、 delBtnがないというエラーが出てしまいます。 DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。 という事ですが、delボタンが出来る前にdomを一度読み込むので、この時点で一度実行されている故にエラーが出ていると考えてよいでしょうか？ また、ページ読み込み時にしか実行されないので、その後削除ボタンを作って削除をしても子の中身は実行されないので、再度削除ができないのではないでしょうか？