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

Question

我会尽力解释，非常感谢您的帮助和建议。我有几个输入 divs 的部分，这些输入 divs 在输入 divs 下有选项 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) 这是 select 当前带有按钮的字符串。对于向下一个的更改位置，我将先前的元素 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>

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

Set element below another element and delete current place element

javascript

html

dom

dom-manipulation