I am trying to dynamically insert a new div block when the insert button is clicked. I found some resources online but they all use a constant div block structure. I want to be able to call the new div by its id and also have an option to remove it on click. Instead of hardcoding "
" in my code, I want to be able to reference it using an id. Can anyone guide me on how to achieve this?Any help would be greatly appreciated.
$('.add').click(function() {
$('.block:last').before('<div class="main-block"><div class="main-block"></div><span class="remove">Remove Option</span></div>');
});
$('.main-block').on('click','.remove',function() {
$(this).parent().remove();
});.block {
display: block;
}
span {
display: inline-block;
cursor: pointer;
text-decoration: underline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-block">
<div class="col-md-2 main-title">
<b>Language</b>
<label class="title">Japan </label><br>
<label class="title">Chinese </label><br>
<label class="title">English </label><br>
<label class="title">Korea </label>
</div>
<div class="col-md-4 main-title">
<b style="margin-left:40px;">Name</b>
<select class="selectbox" name="select1" id="select1">
<option value="1">Business Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select2" id="select2">
<option value="1">Chinese</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select3" id="select3">
<option value="1">English Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select4" id="select4">
<option value="1">Korea Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
</div>
<div class="col-md-6 main-title">
<b style="margin-left:40px;">Alias Name</b>
<input type="text" class="form-control text-box" />
<input type="text" class="form-control text-box" />
<input type="text" class="form-control text-box" />
<input type="text" class="form-control text-box" />
</div>
<div class="block">
<span class="add">Add Option</span>
</div>
</div>