Как отменить метод DOM append ()

function select(){
  document.getElementById('container').style.border = "2px solid red";
}
function pick(){
  document.getElementById('container').appendChild(document.getElementById('item'));
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick = "select()" id = "container">Container</div>
    <br><br>
    <div id = "item" onclick = "pick()">Pick me</div>
  </body>
</html>

Я хочу иметь возможность щелкнуть элемент, и он перейдет в контейнер div, а затем я снова щелкну элемент, он вернется на свое исходное место. Могу ли я отменить этот процесс? Есть ли лучший способ достичь той же цели?

Возможный дубликат Удалить элемент по id

— 10.10.2018 01:21

Проверьте ответ, который я опубликовал. Надеюсь, это поможет.

— 10.10.2018 01:27

javascript html dom

10.10.2018 01:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

373

Ответы 6

Вы можете изменить свою функцию 'pick', чтобы проверить, находится ли item в контейнере, и если это так, добавить его обратно в body, например:

function pick(){

  var item = doucumentgetElementById('item');
  var container = document.getElementById('container');
  if (item.parentElement == container)
  {
     document.body.appendChild(item);
  }
  else
  {
     container.appendChild(item);
  }
}

На первый щелчокitem перемещается в container, на second click он перемещается обратно в body.

10.10.2018 01:19

Я бы подумал, что вы можете использовать свойство parentNode, чтобы проверить, имеет ли элемент div контейнер div в качестве родительского узла, и если он есть, добавить его в тело (или куда вам нужно). Если родительский элемент узлов не является контейнером, добавьте его в контейнер.

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode

10.10.2018 01:21

Другое решение:

сохраните копию для document.getElementById('container').parentNode.innerHTML, даже если вы можете сохранить ее в один массив, тогда он сможет поддерживать отмену по одному шагу.

затем при сбросе присваивает его обратно (если сохранить несколько копий в один массив, назначить с последней копией, затем вытолкнуть ее).

Как показано ниже, демо:

let cloned = []

cloned.push(document.getElementById('container').parentNode.innerHTML)

function select(){
  cloned.push(document.getElementById('container').parentNode.innerHTML)
  document.getElementById('container').style.border = "2px solid red";
}
function pick(){
  cloned.push(document.getElementById('container').parentNode.innerHTML)
  document.getElementById('container').appendChild(document.getElementById('item'))
}

function reset(){
  cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[0])
  cloned = [cloned[0]]
}

function undo(){
  cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[cloned.length-1])
  cloned.pop()
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <button onclick = "reset()">Reset</button>
    <button onclick = "undo()">Undo</button>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick = "select()" id = "container">Container</div>
    <br><br>
    <div id = "item" onclick = "pick()">Pick me</div>
  </body>
</html>

10.10.2018 01:24

function select(){
  document.getElementById('container').style.border = "2px solid red";
}
function pick(){
if (document.getElementById('container').contains(document.getElementById('item')))
{
var item = document.getElementById('item').cloneNode(true);
document.getElementById("container").removeChild(document.getElementById('item'));
document.getElementById('example').appendChild(item);
}
else
  document.getElementById('container').appendChild(document.getElementById('item'));
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body id = "example">
    <p>Select the container and click the item to put it on the container</p>
    <div onclick = "select()" id = "container">Container</div>
    <br><br>
    <div id = "item" onclick = "pick()">Pick me</div>
  </body>
</html>

10.10.2018 01:25

Я думаю, это единственный способ сделать это.

var savedElement;

function select(){
  document.getElementById('container').style.border = "2px solid red";
  
  document.getElementById('container').removeChild(savedElement);
  
  document.getElementById('container').after(savedElement);
}
function pick() {
  savedElement = document.getElementById('item');
  document.getElementById('container').appendChild(savedElement);
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick = "select()" id = "container">Container</div>
    <br><br>
    <div id = "item" onclick = "pick()">Pick me</div>
  </body>
</html>

10.10.2018 01:26

Ты можешь сделать это:

function select(){
  document.getElementById('container').style.border = "2px solid red";
}

// boolean to keep track of the position
var inside = false;
function pick(){
  if (!inside) {
    document.getElementById('container').appendChild(document.getElementById('item'));
    var getMeHere = document.getElementById('getMeBackHere');
    
  } 
  else {
     var pickMe = document.getElementById('container');
     document.getElementById('getMeBackHere').appendChild(document.getElementById('item'));
    
  }
  inside = !inside;
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick = "select()" id = "container">Container</div>
    <br><br>
    <div id = "getMeBackHere"></div>
    <div id = "item" onclick = "pick()">Pick me</div>
  </body>
</html>

10.10.2018 01:29

Другие вопросы по теме

Я пытаюсь очистить данные с сайта гонок, но скребок не возвращает никаких результатов

Как извлечь элементы из скрипта HTML с BeautifulSoup

:: перед псевдо-показом поверх основного контента

Создание параметра типа для HTML5 <audio> программно с помощью Javascript

Размер шрифта слишком мал при рендеринге с помощью wkhtmltoimage

Внутренний размер заменяемого элемента в CSS

Не может требовать JS-файлы на стороне клиента

HTML Canvas Lines с несколькими цветами

Javascript / HTML5: полноэкранный источник видео (веб-камера или аналогичный)

Как создать еще одну страницу

Как отменить метод DOM append ()

Ответы 6

Другие вопросы по теме

Похожие вопросы