Is it a way to remove dropdownlist one by one?
i'm using jquery to create and append dropdownlist with button in div, the button is use for delete dropdownlist.
Requirement:
- Able delete dropdownlist one by one.
Here is a snippet showing the problem:
$(document).ready(function() {
$("#btnAddItem").click(function(){
var text = $('#ddl_device_option').val();
if(text == "device_1"){
$('#dvTable').append('<font face="Arial" size="4"> </font> ');
$('#dvTable').append(text);
$('#dvTable').append('<select id="test"> <option>1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select> ');
var i = "1";
$('#dvTable').append('<input type="button" id='+ i +' value="x" class="btn btn-danger">');
} else if(text == "device_2") {
$('#dvTable').append('<font face="Arial" size="4"> </font> ');
$('#dvTable').append(text);
$('#dvTable').append('<select> <option id="1">1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select> ');
var i = "2";
$('#dvTable').append('<input type="button" id='+ i +' value="x" class="btn btn-danger">');
} else if(text == "device_3"){
$('#dvTable').append('<font face="Arial" size="4"> </font> ');
$('#dvTable').append(text);
$('#dvTable').append('<select> <option>1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select> ');
var i = "3";
$('#dvTable').append('<input type="button" id='+ i +' value="x" class="btn btn-danger">');
}
});
});
$( "#dvTable" ).click(function() {
// alert("clicked");
$(this).remove(); // it will remove entire div
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="itemOptions" class="panel panel-info"><div > <font face="Arial" size="4">Select Device:</font> <select id="ddl_device_option"><option id="1">device_1</option><option id="2">device_2</option><option id="3">device_3</option><option id="4">device_4</option><option id="5">device_5</option><option id="6">device_6</option><option id="7">device_7</option><option id="8">device_8</option><option id="9">device_9</option></select> <input id = "btnAddItem" type="button" value="+" class="btn btn-warning"> </div></div><div id="dvTable"></div>