Здравствуйте. У меня получился вот такой код. Нужно сделать, чтобы кнопки вместе с фоном переходили из одного блока в другой.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content-wrapper">
<div id="grid-table">
<div class="service-title" id="category-2">
<div class="category-content" id="category-2-content">
<button id="forward" type="button">Forward</button>
<button id="back" type="button">Back</button>
</div>
</div>
</div>
<div id="only-category"></div>
</div>
<script src="js/index.js"></script>
</body>
</html>
.content-wrapper{
display: grid;
grid-template-columns: 1fr 1fr;
}
button{
margin-top: 20px;
margin-bottom: 20px;
}
.service-title{
font-size: 14px;
font-weight: 400;
margin-bottom: 20px;
background-color: red;
width: 150px;
height: 150px;
}
let forward = document.getElementById('forward');
forward.addEventListener('click', function(){
let catContent = document.querySelectorAll('.category-content');
catContent.forEach(item=>{
item.parentNode.removeChild(item);
let clonedContent = item.cloneNode(true);
document.getElementById('only-category').appendChild(clonedContent);
})
})
let back = document.getElementById('back');
back.addEventListener('click', function(){
let catDubContent = document.querySelectorAll('.category-content');
let serviceTitle = document.querySelectorAll('.service-title');
catDubContent.forEach(item=>{
item.parentNode.removeChild(item);
let test = item.cloneNode(true);
serviceTitle.forEach(item=>{
item.appendChild(test);
})
console.log(test)
})
})
Простой
