<div class="form-group ">
<label for="input_1" class="control-label col-lg-2">Reponse</label>
<div class="col-lg-6">
<div id="button_pro">
<div class='space' id='input_1'>
<input id="input_1" type="text" name="Reponse" class='left txt' />
<img class="add right" src="~/Content/themes/base/minified/images/add.png" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-danger" type="submit">Enregistrer</button>
<a class="btn btn-default" href="@Url.Action("Index","Question")">Annuler</a>
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</div>
<style>
<font-face {
font-family: Lobster;
src: url('Lobster.otf');
}
body {
width: 1500px;
margin: 90px auto;
}
.space {
margin-bottom: 10px;
}
.txt {
width: 550px;
border: 0.5px solid #ccc;
height: 35px;
border-radius: 5px;
font-family: Lobster;
font-size: 20px;
color: grey;
}
p {
font-family: Lobster;
font-size: 35px;
text-align: center;
}
.but {
width: 250px;
background: #00BB64;
border: 1px solid #00BB64;
height: 65px;
border-radius: 3px;
color: white;
margin-top: 10px;
}
</style>
<script type="text/javascript" src="@Url.Content("~/Assets/Backend/plugins/jquery-multi-select/js/jquery-1.9.1.min.js")"</script>
<script type="text/javascript">
</script>
<script>
$('document').ready(function () {
var id = 2, txt_box;
$('#button_pro').on('click', '.add', function () {
$(this).remove();
txt_box = '<div class="space" id="input_' + id + '" ><input type="text" name="Reponse" class="left txt"/><img src="~/Assets/Backend/img/images/remove.png" class="remove"/><img class="add right" src="~/Assets/Backend/img/images/add.png" /></div>';
$("#button_pro").append(txt_box);
id++;
});
$('#button_pro').on('click', '.remove', function () {
var parent = $(this).parent().prev().attr("id");
var parent_im = $(this).parent().attr("id");
$("#" + parent_im).slideUp('medium', function () {
$("#" + parent_im).remove();
if ($('.add').length < 1) {
$("#" + parent).append('<img src="~/Assets/Backend/img/images/add.png" class="add right"/> ');
}
});
});
});
</script>