добавление и удаление элементов

170

14 января 2019, 12:50

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

Answer 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>

Answer 2

Коряво конечно, вот немного побаловался. Звиняйте за много кода, в основном для наглядности. С помощью 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>