0

Из базы данных выводится массив, в соответствии с количеством элементов массива, на странице отображается нужное количество <input> с value пришедшим из базы. Нужно добавить кнопку -, которая будет появляться тогда, когда инпутов больше одного и будет пропадать тогда, когда элемент остался один

2
  • 1
    Уточните вопрос, потому что не понятно, что должно быть. Добавьте иллюстрации состояний 26 сен 2018 в 8:09
  • 1
    Считаем количество input на странице и если их меньше двух то меняем свойство display на none 26 сен 2018 в 8:15

2 ответа 2

1

Думаю, вы говорите об этом

//if($("#wrap > input").length > 1) //c jquery
if(document.getElementById('wrap').childNodes.length > 1) //Без jquery
  document.getElementById('removeBtm').style.display = "block";
<div id="wrap">
  <input value="qwe">
  <input value="qwe">
  <input value="qwe">
</div>

<button id="removeBtm" style="display:none" name="remove">remove</button>

1

Коряво конечно, вот немного побаловался. Звиняйте за много кода, в основном для наглядности. С помощью jquery.

$(document).ready(function() {
  hideButton();

});
const DynamicArr = [];

$('ul li').click(function() {
    $(this).toggleClass('choosen');
    let numsOfChoosen = $('ul').find('.choosen');
    $('#choiseNum').text(numsOfChoosen.length);
})
$('#proceed').click(function() {
    DynamicArr.length = 0;
    $("#inputDiv").empty();
    $('.choosen').each(function() {
        DynamicArr.push($(this).html());
    });
    $.each(DynamicArr, function(index, value) {
        $("#inputDiv").append('<input type="text" value="' + value + '"/>')
    });
    hideButton();
    $('ul').children().removeClass('choosen');
    $('#choiseNum').text("");
});

$('#slideToOne').click(function() {
    $('#inputDiv').children().last().remove();
    DynamicArr.pop();
    hideButton();
});

//hideButton(), в общем то и вся функция. Проставляется в нужных событиях.

function hideButton() {
    if (DynamicArr.length > 1) {
        $('#slideToOne').css({ display: "block" })
    } else { $('#slideToOne').css({ display: "none" }) }
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


body {

    font-family: 'Open Sans', sans-serif;
}
.wrapper {
	display: flex;
	color: white;
	justify-content: space-evenly;
	background-color: rgba(0, 0, 0, .84);
}

nav {
    display: flex;
}

nav li {
    list-style-type: none;
}

section {
    display: flex;
    justify-content: center;
}

#choise,
#choiseNum {
    margin: auto;
}
#choiseNum {
	width: 50px;
	text-align: center;
}
#proceed {
	align-self: center;
}
.choosen {
	background-color: grey;
}
#inputDiv {
	display: flex;
	flex-direction: column;
	width: 25%;
}
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <title>шаблон</title>
</head>

<body>
    <div class="wrapper">
        <nav>
            <ul>
                <li>Лого</li>
                <li>О проете</li>
                <li>Вакансии</li>
                <li>Новости</li>
                <li>Форум</li>
                <li>Наши проекты</li>
                <li>Курс</li>
                <li>User</li>
            </ul>
        </nav>
        <section>
            <div id="choise">Выбрано</div>
            <div id="choiseNum"></div>
            <input type="button" id="proceed" value="Выбрать"/>

        </section>
    </div>
    <input id="slideToOne" type="button" value="Уменьшать до одного элемента">
    <div id="inputDiv">
    </div>
  
</body>

</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.