admin管理员组文章数量:1031527
I want to move items between two lists. All list items have buttons within them, once this button is clicked, item should be moved to the other list. I have created JavaScript event but it works only one way - so the item can be moved once e.g. from list1 to list2 but when I try to click on the button again, it doesn't work. Can you look at me code and advise how can I assign my event also to newly created items (these that just have been moved)?
document.addEventListener("DOMContentLoaded", function () {
var buttons = document.querySelectorAll(".moveBtn");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
function moveItem(e) {
var newItem = document.createElement("li");
if (this.parentElement.parentElement.id === "list1") {
list2.appendChild(newItem);
} else {
list1.appendChild(newItem);
}
newItem.innerHTML = this.parentElement.innerHTML;
this.parentElement.parentNode.removeChild(this.parentElement);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", moveItem);
}
})
I want to move items between two lists. All list items have buttons within them, once this button is clicked, item should be moved to the other list. I have created JavaScript event but it works only one way - so the item can be moved once e.g. from list1 to list2 but when I try to click on the button again, it doesn't work. Can you look at me code and advise how can I assign my event also to newly created items (these that just have been moved)?
document.addEventListener("DOMContentLoaded", function () {
var buttons = document.querySelectorAll(".moveBtn");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
function moveItem(e) {
var newItem = document.createElement("li");
if (this.parentElement.parentElement.id === "list1") {
list2.appendChild(newItem);
} else {
list1.appendChild(newItem);
}
newItem.innerHTML = this.parentElement.innerHTML;
this.parentElement.parentNode.removeChild(this.parentElement);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", moveItem);
}
})
1 Answer
Reset to default 5Rather than destroying the old element and creating a new one, just move the element:
function moveItem(e) {
var moveTo = this.parentElement.parentElement.id == "list1" ? list2 : list1;
moveTo.appendChild(this.parentElement);
}
Note also that there's no need to match on id; you can match on the actual element:
function moveItem(e) {
var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
moveTo.appendChild(this.parentElement);
}
Live Example:
document.addEventListener("DOMContentLoaded", function() {
var buttons = document.querySelectorAll(".moveBtn");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
function moveItem(e) {
var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
moveTo.appendChild(this.parentElement);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", moveItem);
}
});#list1 {
border: 1px solid green;
}
#list2 {
border: 1px solid blue;
}<div id="list1">
<div>
Item 1
<button class="moveBtn">Move</button>
</div>
<div>
Item 2
<button class="moveBtn">Move</button>
</div>
<div>
Item 3
<button class="moveBtn">Move</button>
</div>
</div>
<div id="list2">
<div>
Item 4
<button class="moveBtn">Move</button>
</div>
<div>
Item 5
<button class="moveBtn">Move</button>
</div>
<div>
Item 6
<button class="moveBtn">Move</button>
</div>
</div>I want to move items between two lists. All list items have buttons within them, once this button is clicked, item should be moved to the other list. I have created JavaScript event but it works only one way - so the item can be moved once e.g. from list1 to list2 but when I try to click on the button again, it doesn't work. Can you look at me code and advise how can I assign my event also to newly created items (these that just have been moved)?
document.addEventListener("DOMContentLoaded", function () {
var buttons = document.querySelectorAll(".moveBtn");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
function moveItem(e) {
var newItem = document.createElement("li");
if (this.parentElement.parentElement.id === "list1") {
list2.appendChild(newItem);
} else {
list1.appendChild(newItem);
}
newItem.innerHTML = this.parentElement.innerHTML;
this.parentElement.parentNode.removeChild(this.parentElement);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", moveItem);
}
})
I want to move items between two lists. All list items have buttons within them, once this button is clicked, item should be moved to the other list. I have created JavaScript event but it works only one way - so the item can be moved once e.g. from list1 to list2 but when I try to click on the button again, it doesn't work. Can you look at me code and advise how can I assign my event also to newly created items (these that just have been moved)?
document.addEventListener("DOMContentLoaded", function () {
var buttons = document.querySelectorAll(".moveBtn");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
function moveItem(e) {
var newItem = document.createElement("li");
if (this.parentElement.parentElement.id === "list1") {
list2.appendChild(newItem);
} else {
list1.appendChild(newItem);
}
newItem.innerHTML = this.parentElement.innerHTML;
this.parentElement.parentNode.removeChild(this.parentElement);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", moveItem);
}
})
1 Answer
Reset to default 5Rather than destroying the old element and creating a new one, just move the element:
function moveItem(e) {
var moveTo = this.parentElement.parentElement.id == "list1" ? list2 : list1;
moveTo.appendChild(this.parentElement);
}
Note also that there's no need to match on id; you can match on the actual element:
function moveItem(e) {
var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
moveTo.appendChild(this.parentElement);
}
Live Example:
document.addEventListener("DOMContentLoaded", function() {
var buttons = document.querySelectorAll(".moveBtn");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
function moveItem(e) {
var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
moveTo.appendChild(this.parentElement);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", moveItem);
}
});#list1 {
border: 1px solid green;
}
#list2 {
border: 1px solid blue;
}<div id="list1">
<div>
Item 1
<button class="moveBtn">Move</button>
</div>
<div>
Item 2
<button class="moveBtn">Move</button>
</div>
<div>
Item 3
<button class="moveBtn">Move</button>
</div>
</div>
<div id="list2">
<div>
Item 4
<button class="moveBtn">Move</button>
</div>
<div>
Item 5
<button class="moveBtn">Move</button>
</div>
<div>
Item 6
<button class="moveBtn">Move</button>
</div>
</div>本文标签： eventsMoving items between two lists in JavaScriptStack Overflow
版权声明：本文标题：events - Moving items between two lists in JavaScript - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745600782a2158443.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论