Есть форма динамического добавления инпута посредством вписывания названия лейбла и нажатия кнопки Add filter
.
Иерархия формы такая:
form
├── div
│ ├── button
│ ├── label
│ └── input
├── div
│ ├── button
│ ├── label
│ └── input
├ ...
...
button
- Кнопка для удаления div
label
- Название для input
input
- Само поле ввода
Мне нужно чтобы по нажатию на button
удалялся весь div
. То есть по факту сделать кнопку удаления поля ввода.
У меня были мысли изложенные в коде, при добавлении label
прописать ему в innerHTML строку с созданием button и добавлением ему id таким образом:
label.innerHTML = `<button id="remove-filter-${filterToAdd.value}">×</button>${filterToAdd.value}`
Отсюда рождается проблема, что чтобы добавить универсальный .onclick
нужен id div
который надо удалить, тогда можно было бы прописать как-то вот так:
const removeButton = document.getElementById('remove-filter')
removeButton.onclick = e => {
e.preventDefault()
mainForm.removeChild(сюда вставить объект)
Однако, если я в лейбле создаю уникальный идентефикатор для button
, то есть к примеру ```id="remove-filter-${filtertoAdd.value}" то я не смогу сделать уникальный кусок для удаления дива.
Можно сделать уникальный id- remove-filter, но тогда нужно как-то получить id от объекта который я хочу удалить.
const initialForm = document.getElementById('initial-form')
const addFilterButton = document.getElementById('add-filter')
const mainForm = document.getElementById('main-form')
const filterToAdd = document.getElementById('filter-for-add')
const addRemoveField = document.getElementById('add-remove-field')
const presentFilters = []
initialForm.addEventListener('submit', e => {
e.preventDefault()
if (document.getElementById('remove-filter') && presentFilters.length === 0) {
addRemoveField.removeChild(document.getElementById('remove-div'))
}
if (filterToAdd.value.length !== 0 && !presentFilters.includes(filterToAdd.value)) {
presentFilters.push(filterToAdd.value)
const div = document.createElement('div')
const input = document.createElement('input')
const label = document.createElement('label')
label.innerHTML = `<button id="remove-filter-${filterToAdd.value}">×</button>${filterToAdd.value}`
label.setAttribute('for', `${filterToAdd.value}`)
input.type = 'text'
input.setAttribute('id', `${filterToAdd.value}`)
div.id = 'input-div'
div.appendChild(label)
div.appendChild(input)
mainForm.appendChild(div)
filterToAdd.value = ''
}
})
body {
background-color: #303030;
font-family: 'Courier New', Courier, monospace;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#initial-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#filter-input-label {
margin-top: 30px;
color: white;
letter-spacing: 3px;
}
#filter-for-add {
background-color: rgb(71, 71, 71);
font-family: 'Courier New', Courier, monospace;
color: white;
padding: 3px 8px;
border: none;
border-radius: 5px;
border-bottom: 2px solid orangered;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#filter-for-add:focus {
outline: none;
}
#add-remove-field {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
gap: 50px;
}
#add-filter {
background-color: transparent;
transition: background-color ease 0.1s;
color: white;
border: 1px solid orangered;
border-radius: 3px;
padding: 5px 10px;
margin-top: 40px;
margin: 40px 10px 0 10px;
transform: scale(1.3)
}
#add-filter:hover, #remove-filter:hover {
background-color: orangered;
transition: background-color ease 0.1s;
cursor: pointer;
}
#main-form {
display: grid;
grid-template-columns: 1fr;
}
#input-div {
display: flex;
flex-direction: column;
margin: 15px 15px;
}
#input-div label {
color: white;
}
#input-div input {
background-color: rgb(71, 71, 71);
transition: background-color ease 0.1s;
color: white;
font-family: 'Courier New', Courier, monospace;
padding: 5px 10px;
border: none;
border-bottom: 1px solid orangered;
border-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#input-div input:focus {
outline: none;
}
#input-div button {
background-color: transparent;
transition: background-color ease 0.1s;
color: white;
border: 1px solid orangered;
border-radius: 3px;
padding: 2px 6px;
margin-right: 10px;
margin-bottom: 5px;
}
#input-div button:hover {
background-color: orangered;
transition: background-color ease 0.1s;
cursor: pointer;
}
<!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="../font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./df.css">
</head>
<body>
<form id="initial-form">
<label id="filter-input-label" for="filter-for-add">Filter: </label>
<input type="text" id="filter-for-add" list="initial-input-variants">
<datalist id="initial-input-variants">
<option>HostName</option>
<option>ProdName</option>
<option>ProcName</option>
<option>ProdCode</option>
<option>Customer</option>
<option>tLogIn</option>
</datalist>
<div id="add-remove-field">
<button type="submit" id="add-filter">Add filter <span>+</span></button>
</div>
</form>
<form id="main-form"></form>
<script src="./df.js"></script>
</body>
</html>