Reputation: 37
Sorry for the noob question as I just picked up javascript today.
I'm trying to create and delete div's with javascript buttons, and I have that working fairly well.
However when I delete,for example, div #7, out of div 1-8 I need the text to change so that it doesn't look like
number: 1
number: 2
number: 3
number: 4
number: 5
number: 6
number: 8
This code adds the div at the end of the containing div xbox
d1.insertAdjacentHTML('beforeend', '<div class="xbox" id ="xbox1'+numItems+'">Number: '+countBox()+'</div>
this code counts the amount of boxes already
function countBox()
{
var numItems = $('.Cbox').length;
return numItems;
}
I've thought about just taking the div and setting the inner-html. But I figured I'd see if there is a better way to force the code to update the variable.
Upvotes: 1
Views: 71
Reputation: 8192
Maybe you could use an ol
instead with a custom format? (More info)
Or if there is a small amount of numbers, nth-child
with text-before
?
#group div:nth-child(1):before {
content: "number: 1";
}
#group div:nth-child(2):before {
content: "number: 2";
}
Legacy support is not very good in both cases.
Upvotes: 0
Reputation: 2463
Update the div text
document.getElementById('yourID').innerHTML = "new text!";
full example
HTML
<div id="div 1" onClick('update(0)');>some text</div>
<div id="div 2" onClick('update(1)');>some text</div>
<div id="div 3" onClick('update(2)');>some text</div>
* JavaScript *
function update(column){
//max number of divs from your example would be 8
for(var i = column; i < MAX_NUMBER_DIV_HERE; i++){
document.getElementById('div ' + i).innerHTML = i + "";
}
}
Upvotes: 0
Reputation: 318372
So basically update the text of all the elements so they are in numbered order again after one is removed.
The numItems
variable uses the length, so that's not an issue.
To update the text of the all the boxes you could do
$('.xbox').text(function(i) {
return 'number: ' + (i+1);
});
Upvotes: 1