JavaScript Работа с элементами страницы

-

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM управление элементами</title>
    <script src="/app.js" defer></script>
    <style>
        body{
            background-color: #435187;
            color: rgba(255, 255, 255, 0.672)
        }
        .autos{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .autoCard {
            width: 25%;
            background-color: #fff;
            color:black;
            text-align: center;
            margin: 5px;
            box-shadow: 6px 6px 6px black;
        }
       
        .btn{
            margin-bottom: 15px;
            padding: 10px;
            background-color: #000000;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
   
</body>
</html>


// DOM управление элементами
// Создание элемента div
const div = document.createElement('div');
// Добавление класса 'wrapper' к нему
div.classList.add('wrapper');
// Добаление его на страницу
const body = document.body;
body.appendChild(div);

// Создание заголовка H1 с текстом 'Изучение DOM'
const header = document.createElement('h1');
header.textContent = 'Изучение DOM';
// Добавление заголовка ПЕРЕД DIV с классом 'wrapper'
div.insertAdjacentElement('beforebegin', header);

// Создание списка из трех элементов
const ul = `
<ul>
    <li>Один</li>
    <li>Два</li>
    <li>Три</li>
</ul>
`;
// Размещение списка внутри DIV с классом wrapper
div.innerHTML = ul

// Создание изображения
const img = document.createElement('img');
img.src = '/070_bl.png';
img.width = 240;
img.classList.add('super');
img.alt = 'Легко стирать в машине'
// Установка изображения на страницу внутрь DIV с классом wrapper
div.appendChild(img);

// Добавление элементов с помощью HTML строки
const elemHTML = `
    <div class = 'pDiv'>
        <p>Параграф 1</p>
        <p>Параграф 2</p>
    </div>
`
// Помещение элемента перед ul
const ulList = div.querySelector('ul');
ulList.insertAdjacentHTML('beforebegin', elemHTML);

// Добавление ко второму параграфу класса text
const pDiv = document.querySelector('.pDiv');
pDiv.children[1].classList.add('text');

// Удаление первого параграфа
pDiv.firstElementChild.remove();

// Создание функции для генерации разметки
const generateAutoCard = (brand, color, year) => {

   
    const curDate = new Date();
    const curYear = curDate.getFullYear();
   
    return `
            <div class = "autoCard">
                <div>
                    <h2>${brand.toUpperCase()} ${year}</h2>
                    <p>Автомобиль ${brand} - ${year} года. Возраст ${curYear - year} лет</p>
                    <p>Цвет: ${color}</p>
                    <button type='button' class = 'btn'>Удалить</button>
                </div>
            </div>
    `;
}

// Создаем новый DiV с классом autos
const carsDiv = document.createElement('div');
carsDiv.classList.add('autos');

// Создаем карточки товара на основе информации из массива carsList
const carsList = [
    { brand: 'Tesla', year: 2015, color: 'Красный' },
    { brand: 'Lexux', year: 2017, color: 'Серебрянный' },
    {brand: 'Nissan', year: 2018, color: 'Голубой'}
];

const carsHTML = carsList.map(car => {
    return generateAutoCard(car.brand, car.color, car.year)
}).join('');
carsDiv.innerHTML = carsHTML;

// Помещаем на страницу до дива с классом wrapper
div.insertAdjacentElement('beforebegin', carsDiv);


// Обработка кнопок
const buttons = document.querySelectorAll('.btn');
// Создаем функцию удаления карточек
function handleClick(e) {
    const currentButton = e.currentTarget;
    // currentButton.parentElement.remove(); // Не желательно использовать
    currentButton.closest('.autoCard').remove(); // Отлично работает!!!!!
    console.log(currentButton.parentElement);
}

buttons.forEach(button => {
    button.addEventListener('click', handleClick)
})



Комментарии

Отправить комментарий