JavaScriptでリストを生成し、それぞれ個別にdeleteできるようにしたい
Q&A
Closed
やりたいこと
メッセージを入力すると、リストができる。
各リストには deleteボタンがついていて、クリックすると、クリックしたリストだけ消去したい。
やろうとしたこと
リストを作ったらカウントし、そのカウントを リストに keyなどで連番をつけて、
消去できるようにしたかった。
知りたいこと
- どうやってリストに連番を付与したらいいかわからない。
document.createElement('li');
でリストを生成するよりも、
item2.innerHTML = mess01 + '<div id="delete-bt">delete</div>';
の部分で下記のようにした方がいいのか
item2.innerHTML = '<li key=' + 番号 + mess01 + '<div id="delete-bt">delete</div>';
- また、このやり方でいいのか、このようなことをする時に、一般的にはどんな風にされているのか
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS入力表示リスト</title>
</head>
<body>
<div id="root"></div>
<form name="frm">
<p>メッセージを入力してください</p>
<div id="li-count"></div>
<input type="text" id="message" name="message" size="40">
<input type="button" id="btn" value="OK" />
</form>
<ul id="ul_parents">
</ul>
<script>
window.onload = function(){
document.getElementById('btn').onclick = function(){
var mess01 = document.frm.message.value;
console.log(mess01);
const item2 = document.createElement('li');
item2.classList.add ('li-btn');
item2.innerHTML = mess01 + '<div id="delete-bt">delete</div>';
const ul = document.querySelector('ul');
ul.appendChild(item2);
var elements = document.getElementsByClassName('li-btn');
var elementsCt = elements.length;
console.log("elementsCt",elementsCt);
var counter = document.getElementById('li-count');
counter.textContent = elementsCt;
var ul_area = document.getElementById('ul_parents');
var deleteBt01 = document.getElementById('delete-bt');
deleteBt01.addEventListener('click',function(){
//ここでクリックしたリストだけを消去したい、今は１個目のリストのdeleteを押すと、全部消えてしまう。
ul_area.removeChild(elements[0]);
});
};
};
</script>
</body>
</html>
その後の修正
まだ直っていません。いくつかメッセージを入れて、
一番上をクリックすると全部消え、
一番下のものをクリックすると一つずつ消えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS入力表示リスト</title>
</head>
<body>
<div id="root"></div>
<form name="frm">
<p>メッセージを入力してください</p>
<div id="li-count"></div>
<input type="text" id="message" name="message" size="40">
<input type="button" id="btn" value="OK" />
</form>
<ul id="ul_parents">
</ul>
<script>
window.onload = function(){
document.getElementById('btn').onclick = function(){
var mess01 = document.frm.message.value;
console.log(mess01);
const item2 = document.createElement('li');
item2.classList.add ('li-btn');
var elementsCt = 0;
item2.innerHTML = mess01 + '<div class="delete-bt">delete</div>';
const ul = document.querySelector('ul');
ul.appendChild(item2);
if(item2.classList.contains('li-btn')==true){
console.log("何個？",item2.classList.contains('li-btn'));
console.log("クラス何個？",item2.classList.length);
}
//li-btnという名前のクラスが 何個追加されたか表示
var elements = document.getElementsByClassName('li-btn');
elementsCt = elements.length;
//counter
var counter = document.getElementById('li-count');
counter.textContent = elementsCt;
var ul_area = document.getElementById('ul_parents');
var deleteBt01 = document.getElementsByClassName('delete-bt');
for(let i=deleteBt01.length-1;i>=0;i--){
deleteBt01[i].addEventListener('click',function(){
deleteBt01[i].parentNode.remove();
});
}
};
};
</script>
</body>
</html>
うまくいったもの
@aotoriii さんに教えていただき、うまく行ったものを下記に貼ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JS入力表示リスト</title>
</head>
<body>
<div id="root"></div>
<form name="frm">
<p>メッセージを入力してください</p>
<div id="li-count"></div>
<input type="text" id="message" name="message" size="40">
<input type="button" id="btn" value="OK" />
</form>
<ul id="ul_parents">
</ul>
<script>
window.onload = function(){
document.getElementById('btn').onclick = function(){
var mess01 = document.frm.message.value;
console.log(mess01);
const item2 = document.createElement('li');
item2.classList.add ('li-btn');
var elementsCt = 0;
item2.innerHTML = mess01 + '<div class="delete-bt">delete</div>';
const ul = document.querySelector('ul');
ul.appendChild(item2);
if(item2.classList.contains('li-btn')==true){
}
//li-btnという名前のクラスが 何個追加されたか表示
var elements = document.getElementsByClassName('li-btn');
elementsCt = elements.length;
console.log("elementsCt",elementsCt);
//counter
var counter = document.getElementById('li-count');
counter.textContent = elementsCt;
var deleteBts = document.getElementsByClassName('delete-bt');
const lastDeleteBt = deleteBts[deleteBts.length-1];
lastDeleteBt.addEventListener('click',function(){
if(lastDeleteBt.parentNode){
lastDeleteBt.parentNode.remove();
}
});
};
};
</script>
</body>
</html>
未だにわからないこと
- click後だと何故clickしたものが一番最後にカウントされるのかがわからない
- click前は、最後に追加したものが最後にカウントされる、またclick後でもdeleteBts[0].parentNode を見ると、順番に表示される。何故クリックしたものが最後にカウントされるんだろう？
var deleteBts = document.getElementsByClassName('delete-bt');
const lastDeleteBt = deleteBts[deleteBts.length-1];
console.log("lastDeleteBt.parentNode--Click前",lastDeleteBt.parentNode);
lastDeleteBt.addEventListener('click',function(){
if(lastDeleteBt.parentNode){
console.log("lastDeleteBt.parentNode--Click後",lastDeleteBt.parentNode);//click後だと何故クリックしたものが一番最後にカウントされるのかがわからない、deleteBts[0].parentNodeなどで見ると表示順に出てくるのに？
console.log("1",deleteBts[0].parentNode);
console.log("2",deleteBts[1].parentNode);
console.log("3",deleteBts[2].parentNode);
lastDeleteBt.parentNode.remove();
}
});
0
