如何定位 <li> 列表之间的元素和转移

Question

I am a newbie here. I have two different lists in HTML: the first list contains several elements, the second list contains none.

My goal is to transfer the elements of list 1 to list 2. I do want to transfer those element clicking on the "move" symbol (which I positioned).

However, I do not know how to target the li element to transfer.

I do know it is a basic question, but still thanks for your support and time !

I have tried to addEventListener to "move". Therefore, I have tried to use textContext to modify the list 2 elements. However, I do not know how to target the li element in the first list.

//FIRST LIST
<ul class="list-group todos mx-auto text-light">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>play mariokart</span>
            <i class="far fa-trash-alt move"></i>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>defeat ganon in zelda</span>
            <i class="far fa-trash-alt move"></i>
          </li>

//SECOND LIST
<h1>Items in the Pack</h1>
      <ul class ="pack">
        <li> </li>
        <li> </li>
        <li> </li>
      </ul>

---

 const list = document.querySelector('.todos');
 const pack = document.querySelector(".pack");


 list.addEventListener('click', e => {

      if(e.target.classList.contains('move')){
       pack.querySelector('li').textContent = `${//missing variable//}%`; 

      }

    }); ```

Answer 1

first of all you need to close off your first list with /ul .

put the move class in the li element that contains your todos

<li class="move list-group-item d-flex justify-content-between align-items-center">

then, this script should handle everything.

<script>
    window.onload = function() {
        document.getElementById('movebutton').addEventListener('click', function() {
            const list = document.querySelector('.todos').getElementsByTagName('li');
            const pack = document.querySelector('.pack');
            for(var x=0; x<list.length; x++) {
                if(list[x].classList.contains('move')) {
                    pack.appendChild(list[x]);
                    x--;
                }
            }
        });
    }
</script>

appendChild automatically removes from the original list, so you need x-- to correct where the next loop points to.

and a button that attaches to the event listener.

<button id="move">move</button>

Edit:

Apologies, i missed the part where you wanted to move them individually. The following fixes that and also makes sure your list elements maintain their class and styles etc. Click on the move text to move them.

Also, just added a return back to the original list feature.

 window.onload = function() { const list = document.querySelector('.todos'); const pack = document.querySelector('.pack'); list.addEventListener('click', function(e) { if(e.target.classList.contains('move')) { e.target.innerText = " - return"; li = e.target.parentElement; pack.appendChild(li); } }); pack.addEventListener('click', function(e) { if(e.target.classList.contains('move')) { e.target.innerText = " - move"; li = e.target.parentElement; list.appendChild(li); } }); } 

 //FIRST LIST <ul id="first" class="list-group todos mx-auto text-light"> <li class="list-group-item d-flex justify-content-between align-items-center"> <span style="font-weight:bold">play mariokart</span> <i class="far fa-trash-alt move"> - move</i> </li> <li class="list-group-item move d-flex justify-content-between align-items-center"> <span>defeat ganon in zelda</span> <i class="far fa-trash-alt move"> - move</i> </li> </ul> //SECOND LIST <h1>Items in the Pack</h1> <ul id="second" class ="pack"> <li> </li> <li> </li> <li> </li> </ul> 

Answer 2

You can use parentElement to get the list element which is the immediate parent of the element with the move class.

You can then create new list elements and append them to the destination list. Here's the flow, with minor changes to your code.

 const list = document.querySelector('.todos');
 const pack = document.querySelector(".pack");

 list.addEventListener('click', e => {
   if (e.target.classList.contains('move')) {
     let originalListEntry = e.target.parentElement;
     var newListEntry = document.createElement("li")
     newListEntry.innerText = originalListEntry.innerText
     pack.appendChild(newListEntry)
   }
 });

Here's a working example I've added a + inside the move span for demo purposes.