質問編集履歴

2

tuyopo

tuyopo score 10

2018/10/30 09:34  投稿

動的にdivを追加する
### 前提・実現したいこと
追加ボタンで新しいdivを作成し、削除ボタンでボタンに対応したdivを削除したいです。
また削除するときにname属性を振りなおしたいです。
### 発生している問題・エラーメッセージ
```
削除ボタンを押したときにdivは削除されるのですが、対応したdivではなく、上から順番に削除されてしまいます。
また、追加ボタンでname属性を追加するところまではできたのですが、削除ボタンを押したときに振りなおす記述がわかりません。
```
### 該当のソースコード
```ここに言語名を入力
<!DOCTYPE html>
<html>
<head>
 <mata charset="utf-8">  
   <title>練習</title>
   <link rel=stylesheet href="css/practice.css">  
 </head>
   <body>
     <div id="container" neme="edit">
       <p>title</p>
       <input type="text">
       <p>contents</p>
       <textarea></textarea>
       <br>
       <input type="submit" id="ok" value="ok"></button>
       <input type="button" id="cancel" value="キャンセル"></button>
     </div>
     <div id="newElem" style="width:300px;">
     <div id="newA" style="width:300px;">
   </div>
   <div>
     <input type="button" id="btn" value="追加">
   </div>
 
 <script>  
 
 var ok=document.getElementById("ok");  
 var cancel=document.getElementById("cancel");  
 var btn=document.getElementById("btn");  
 currentNumber=0;  
 btn.addEventListener('click',function(){  
     
 currentNumber++;  
   var div=document.createElement("div");  
   div.innerHTML='<div style="border:1px solid #333;width:300px;height:200px;margin:10px;"><p>ユーザー名</p><input type="text"><p>備考</p><textarea></textarea><button id="ok">ok</button><button id="cancel">キャンセル</button></div>'  
 div.setAttribute("name","item"+currentNumber);  
 div.id="newarea";  
 //div.setAttribute("id","newarea"+currentNumber);  
   var parent=document.getElementById('newElem')  
   parent.appendChild(div);  
 
   dlt_btn=document.createElement('button');  
   dlt_btn.innerHTML="×";  
 
   div.insertBefore(dlt_btn,div.firstChild);  
   dlt_btn.setAttribute("id","dlt"+currentNumber);  
   dlt_btn.setAttribute("class","dltbtn");  
dlt_btn.addEventListener("click",function(){  
 document.getElementById("newarea").remove()  
},false);  
 },false);  
</script>  
</body>
</html>
```
### 試したこと
ここに問題に対して試したことを記載してください。
### 補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
  • JavaScript

    32810 questions

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

  • jQuery

    12203 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1

tuyopo

tuyopo score 10

2018/10/30 07:59  投稿

要素を動的に追加・削除する
動的にdivを追加する
### 前提・実現したいこと
追加ボタンで新しいdivを作成し、削除ボタンでボタンに対応したdivを削除したいです。
また削除するときにname属性を振りなおしたいです。
### 発生している問題・エラーメッセージ
```
削除ボタンを押したときにdivは削除されるのですが、対応したdivではなく、上から順番に削除されてしまいます。
また、追加ボタンでname属性を追加するところまではできたのですが、削除ボタンを押したときに振りなおす記述がわかりません。
```
### 該当のソースコード
```ここに言語名を入力
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8">
<title>練習</title>
<link rel=stylesheet href="css/practice.css">
</head>
<body>
<div id="container" neme="edit">
<p>title</p>
<input type="text">
<p>contents</p>
<textarea></textarea>
<br>
<input type="submit" id="ok" value="ok"></button>
<input type="button" id="cancel" value="キャンセル"></button>
</div>
<div id="newElem" style="width:300px;">
</div>
<div>
<input type="button" id="btn" value="追加">
</div>
<script>
var ok=document.getElementById("ok");
var cancel=document.getElementById("cancel");
var btn=document.getElementById("btn");
currentNumber=0;
btn.addEventListener('click',function(){
currentNumber++;
var div=document.createElement("div");
div.innerHTML='<div style="border:1px solid #333;width:300px;height:200px;margin:10px;"><p>ユーザー名</p><input type="text"><p>備考</p><textarea></textarea><button id="ok">ok</button><button id="cancel">キャンセル</button></div>'
div.setAttribute("name","item"+currentNumber);
div.id="newarea";
//div.setAttribute("id","newarea"+currentNumber);
var parent=document.getElementById('newElem')
parent.appendChild(div);
dlt_btn=document.createElement('button');
dlt_btn.innerHTML="×";
div.insertBefore(dlt_btn,div.firstChild);
dlt_btn.setAttribute("id","dlt"+currentNumber);
dlt_btn.setAttribute("class","dltbtn");
dlt_btn.addEventListener("click",function(){
document.getElementById("newarea").remove()
},false);
},false);
</script>
</body>
</html>
```
### 試したこと
ここに問題に対して試したことを記載してください。
### 補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
  • JavaScript

    32810 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る