admin管理员组文章数量:1026989
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);
}
})
Share
Improve this question
asked Oct 27, 2016 at 16:44
JoannaJoanna
2891 gold badge7 silver badges16 bronze badges
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);
}
})
Share
Improve this question
asked Oct 27, 2016 at 16:44
JoannaJoanna
2891 gold badge7 silver badges16 bronze badges
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, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论