将元素设置在另一个元素之下并删除当前放置元素

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>