When a list box is clicked, it will be removed and replaced by 'n' new list boxes of the same type. The value of 'n' is provided by the user in a prompt. This process can be repeated.
The width of the newly generated list boxes should not be the same as the original one that was clicked. If the original list box had a width of '200px', then the width of the new items should be '(200/n) px'.
The position of the newly generated list boxes should be at the exact same spot as the clicked one, one after the other. Also, their widths should be reduced by n as mentioned above.
I have seen suggestions to use methods like After() or InsertAfter(), but I am unfamiliar with JavaScript and jQuery so I am unsure how to implement them in this scenario.
Here is the HTML code:
<h4>Rhythm-Ruler</h4>
<div>
<ul class="list">
<li></li>
</ul>
</div>
And the JavaScript code:
$("ul").delegate("li", "click", function(){
var inputNum = prompt("Divide By:");
if(inputNum > 1){
$(this).remove();
}
for (var i = 1; i <= inputNum; i++){
var newList = document.createElement("li");
$(".list").append($(newList).text(i));
$(this).css('width', 200/inputNum + 'px');
}
});
As for the CSS:
li {
float: left;
list-style: none;
width: 200px;
height: 30px;
box-shadow:0 -1px 1em hsl(60, 60%, 84%) inset;
background-color: #FF7F50;
display: inline;
text-align: center;
padding: 2px;
}
For reference, you can view the JSFiddle here: https://jsfiddle.net/yoshi2095/gwpf42ds/6/