ITsolutionWizard
asked on
javascript, button, count
I have below dropdown and if I select 1 or 2, it will loop a set of
<input type=text name=firstName1><input type=text name=lastName1>
or
<input type=text name=firstName1><input type=text name=lastName1>
<input type=text name=firstName2><input type=text name=lastName2>
<button>Remote</button>
and if remote button is clicked, it will remove the select row.
How can I do that?
<div class="form-group input-group">
<span class="input-group-addon"> <i class="fa fa-heart-o"></i></span>
<select required class="form-control" id="primaryKids" name="primaryGender">
<option value="" disabled="disabled" selected="selected" class="disabled">How Many Kids</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input type=text name=firstName1><input type=text name=lastName1>
or
<input type=text name=firstName1><input type=text name=lastName1>
<input type=text name=firstName2><input type=text name=lastName2>
<button>Remote</button>
and if remote button is clicked, it will remove the select row.
How can I do that?
<div class="form-group input-group">
<span class="input-group-addon">
<select required class="form-control" id="primaryKids" name="primaryGender">
<option value="" disabled="disabled" selected="selected" class="disabled">How Many Kids</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
Just a suggestion -- you may be overthinking this. Most people know how many kids they have and can type the number. Why not just use a text input control?
<script >
function loadPage(){
var btn = document.getElementsByTagName('button');
btn[0].addEventListener('click', removeNode);
}
document.addEventListener('DOMContentLoaded', loadPage);
function removeNode(){
var nodeToRemove = document.getElementsByTagName('select');
nodeToRemove[0].remove(nodeToRemove[0].selectedIndex);
}
</script>
ASKER
albacom:<button>Remote</bu tton> the button control's will be dynamically generated, like
id=btn1 btn 2 btn 3....
how can I handle in this case? Thanks
id=btn1 btn 2 btn 3....
how can I handle in this case? Thanks
<script >
function loadPage(){
var btn = document.getElementsByTagName('button');
for(var i = 0; i < btn.length; i++){
btn[i].addEventListener('click', removeNode);
}
}
document.addEventListener('DOMContentLoaded', loadPage);
function removeNode(){
alert('Button ' + this.id + 'Clicked');
var nodeToRemove = document.getElementsByTagName('select');
nodeToRemove[0].remove(nodeToRemove[0].selectedIndex);
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Your sample work in live webpage.. .Thanks