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

Posted 2023-01-23

我将尽力解释，感谢您的帮助和建议。我在这里的输入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> 

答案

我已经找到了解决这个问题的方法，我在输入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
  

以上是关于将元素设置在另一个元素下面并删除当前位置元素的主要内容，如果未能解决你的问题，请参考以下文章

交叉淡入淡出元素而不诉诸位置：绝对

如何从一个数组中查找指定的元素，并返回这个元素在数组中的位置

如何使选择列表出现在另一个元素上？

jquery如何获取当前元素的位置

2021-11-10：O 时间插入删除和获取随机元素。实现RandomizedSet 类：RandomizedSet() 初始化 RandomizedSet 对象。bool insert(in(代码片

jQuery - 获取并设置 CSS 类：对 CSS 元素进行操作