Как исключить определенные элементы из флексбокса в CSS, не помещая элемент в новый div?
Я делаю калькулятор, в котором кто-то может добавлять и удалять поля ввода с помощью JavaScript. Я реализовал макет flexbox для раздела, содержащего поля ввода и кнопки. Текущая структура CSS помещает все элементы (поля ввода и кнопки) в столбец, поскольку для родительского контейнера установлено значение flex-direction: column;.
Проблема в том, что мои кнопки также располагаются в столбце, и я хочу, чтобы он был выровнен по горизонтали. Я не могу обернуть кнопки в div, так как это будет мешать моему JavaScript.
function addClass(){
let container = document.getElementById("input-field-1").parentNode;
let fieldLength = container.getElementsByClassName("inputfield").length;
let inputField = document.getElementById("input-field-1");
let clone = inputField.cloneNode(true);
clone.id = "input-field-" + (fieldLength + 1);
let classNumber = fieldLength + 1;
let inputs = clone.getElementsByTagName("input");
inputs[0].placeholder = "Class "+ classNumber;
inputs[0].value = "";
inputs[1].value = "";
inputs[2].value = "";
let addButton = document.getElementById("add-btn");
container.insertBefore(clone, addButton);
}.semester-calc {
display: flex;
align-items: center;
flex-direction: column;
}<div class = "semester-calc">
<div class = "inputfield" id = "input-field-1">
<input class = "class-name" type = "text" placeholder = "Class 1">
<input class = "grade-val" type = "text" placeholder = "Grade">
<input class = "credit-val" type = "text" placeholder = "Credits">
</div>
<!-- Additional input fields -->
<button id = "add-btn" onclick = "addClass()">Add Class</button>
<button id = "remove-btn" onclick = "remove()">Remove Class</button>
<button id = "clear-btn" onclick = "clearClass()">Clear Classes</button>
<button id = "calculate-gpa" onclick = "calculate()">Calculate!</button>
</div>Проблема: я хочу, чтобы кнопки располагались горизонтально под полями ввода, но flexbox заставляет их выравниваться в столбец. Помещение его в div, похоже, мешает настройке моего родительского контейнера javascript, поэтому я не хочу этого делать. Есть ли способ выровнять кнопки по горизонтали, не изменяя мой javascript, или мне нужно просто переделать функцию addClass?
«Я не могу поместить кнопки в div, так как это будет мешать моему JavaScript». - ну тогда соответствующим образом модифицируйте JavaScript...?
вместо клонирования элементов вы думали о работе с <template> ? таким образом вы можете разделить свою логику и свою структуру и обернуть кнопки так, как вам нравится (вы также можете сделать это без шаблона, но в конечном итоге это может сделать его еще чище)
Вы пытались встроить элементы управления кнопками в их собственный контейнер div, а затем изменить js так, чтобы при использовании insertBefore вы передавали такой div вместо кнопки добавления. Конечно, есть лучшие способы достижения этой цели... но ваш все равно будет работать, если вы примените мое предложение выше.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете сделать кнопки встроенными элементами:
.semester-calc:nth-child(-n + 3){
display: inline;
}
Это своего рода хак, но он будет работать так, как вы ожидаете:
function addClass(){
let container = document.getElementById("input-field-1").parentNode;
let fieldLength = container.getElementsByClassName("inputfield").length;
let inputField = document.getElementById("input-field-1");
let clone = inputField.cloneNode(true);
clone.id = "input-field-" + (fieldLength + 1);
let classNumber = fieldLength + 1;
let inputs = clone.getElementsByTagName("input");
inputs[0].placeholder = "Class "+ classNumber;
inputs[0].value = "";
inputs[1].value = "";
inputs[2].value = "";
let addButton = document.getElementById("add-btn");
container.insertBefore(clone, addButton);
}.semester-calc {
display: flex;
align-items: center;
flex-direction: column;
}
.semester-calc:nth-child(-n + 3){
display: inline;
}<div class = "semester-calc">
<div class = "inputfield" id = "input-field-1">
<input class = "class-name" type = "text" placeholder = "Class 1">
<input class = "grade-val" type = "text" placeholder = "Grade">
<input class = "credit-val" type = "text" placeholder = "Credits">
</div>
<!-- Additional input fields -->
<button id = "add-btn" onclick = "addClass()">Add Class</button>
<button id = "remove-btn" onclick = "remove()">Remove Class</button>
<button id = "clear-btn" onclick = "clearClass()">Clear Classes</button>
<button id = "calculate-gpa" onclick = "calculate()">Calculate!</button>
</div>
это должно быть в div, так же, как вы обрабатываете входные данные