将元素设置在另一个元素下面并删除当前位置元素

Question

我将尽力解释，感谢您的帮助和建议。我在这里的输入div很少，这些输入div的输入div下有选项div，可用于删除该div或将其发送到较高的div，然后将第三个选项发送至下面。删除一个是有效的，但删除一个以上和以下一个是困难的。我想将下面的div发送给另一个div。然后从其实际位置删除该div。删除一个正在工作，但是首先我要添加，然后在这里删除我正在使用的代码。

  const downwordButtons = document.querySelectorAll('.downword-button');

  if(downwordButtons){

  const downwordButtonsArr = Array.from(downwordButtons);

  downwordButtonsArr.forEach(button => {
      button.setAttribute('onclick', 'return false');

      button.addEventListener('click', () => {

          //Selecting div options div is where buttons are stored
          const optionsDiv = button.parentElement;
          // This is div which i selected with click of that button
          const editDiv = optionsDiv.previousSibling;

          // This is complicated part where i wanna select below element
          const downwordDiv= editDiv.nextSibling;

          downwordDiv.insertAdjacentHTML('afterend', editDiv);
          downwordDiv.insertAdjacentHTML('afterend', optionsDiv);

          // it'll delete both option div and input div after finish
          optionsDiv.parentElement.removeChild(optionsDiv);
          editDiv.parentElement.removeChild(editDiv);


          // Event listener end
      });


      // Foreach end
  });

  // If end
  }

HTML

  <div>
      <label for="user_login">Username</label>
      <input type="text" name="user" id="user_login" class="input" value="" size="20" />
  </div>
      <div class="Admin_edit">
          <button class="button_delete"><ion-icon name="trash-outline"></ion-icon></button>
          <button class='button_downword'><ion-icon name="arrow-down-circle-outline"></ion-icon></button>
          <button class='button_upword'><ion-icon name="arrow-up-circle-outline"></ion-icon></button>

      </div>
      <div>
          <label for="user_pass">Password</label>
          <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
          <div class="forget">
              <a class='forgetButton' href='#'>Forgot Password ?</a>
          </div>
      </div>
       <div class="Admin_edit">
          <button class="button_delete"><ion-icon name="trash-outline"></ion-icon></button>
          <button class='button_downword'><ion-icon name="arrow-down-circle-outline"></ion-icon></button>
          <button class='button_upword'><ion-icon name="arrow-up-circle-outline"></ion-icon></button>

      </div> 

Answer 1

我已经找到了解决这个问题的方法，我在输入div中添加了编辑按钮div，而不是nextSibling和previousSibling，我使用了父节点，并将html元素转换为我使用的js字符串（outerHtml），用于选择当前的按钮。对于向下移动的更改位置，我在父节点上使用了上一个元素var，之后又添加了nextElementSibling，这让您很生气，我昨晚也正在工作，但现在可以正常工作，因此检查代码，可以帮助您理解。 >

JS

const downwordButtons = document.querySelectorAll('.downword-button');

  if(downwordButtons){

  const downwordButtonsArr = Array.from(downwordButtons);

  downwordButtonsArr.forEach(button => {
      button.setAttribute('onclick', 'return false');

      button.addEventListener('click', () => {

          // Now just have to select this 
          const CurDiv = button.parentElement.parentNode;
          
          // Convert into js string html
          const html = `${CurDiv.outerHTML}`;

          //Here Select below element  
          const downwordDiv = CurDiv.nextElementSibling;

          downwordDiv.insertAdjacentHTML('afterend', html);

          // it'll delete both option div and input div after finish
          optionsDiv.parentElement.removeChild(optionsDiv);
          
          // Finally remove old div (CurDiv)
          CurDiv.parentElement.removeChild(CurDiv);


          // Event listener end
      });


      // Foreach end
  });

  // If end
  }

HTML

 <div>
      <label for="user_login">Username</label>
      <input type="text" name="user" id="user_login" class="input" value="" size="20" />
          <div class="Admin_edit">
          <button class="button_delete"><ion-icon name="trash-outline"></ion-icon></button>
          <button class='button_downword'><ion-icon name="arrow-down-circle-outline"></ion-icon></button>
          <button class='button_upword'><ion-icon name="arrow-up-circle-outline"></ion-icon></button>

      </div>
      
  </div>
  
      <div>
          <label for="user_pass">Password</label>
          <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
          <div class="forget">
              <a class='forgetButton' href='#'>Forgot Password ?</a>
          </div>
           <div class="Admin_edit">
          <button class="button_delete"><ion-icon name="trash-outline"></ion-icon></button>
          <button class='button_downword'><ion-icon name="arrow-down-circle-outline"></ion-icon></button>
          <button class='button_upword'><ion-icon name="arrow-up-circle-outline"></ion-icon></button>

      </div> 
      </div>