更改 HTML JAVASCRIPT 的段落编号

Question

我正在使用以下代码列出可以使用JS添加的元素：

function getMovementButtons(size, articleId, articleTitle, articleType){
var lowerArticleType = articleType.toLowerCase();
var html = '<div>'+
'<span style="vertical-align: top">'+ size + 
'<span style="vertical-align: top">.</span> '+
'</span>'+
'<span style="vertical-align: top" class="'+lowerArticleType+'-title displaying-'+lowerArticleType+'-id' + articleId +'">' + articleTitle + '</span>' + 
'<input class="'+lowerArticleType+'-button-delete"  type="button" value="' + '<%= LanguageUtil.get(pageContext, "global.action.delete")%>' + '" onclick="removeArticle(this,''+articleType+'')"/>' +
'<div class="'+lowerArticleType+'-div-move"><input class="'+lowerArticleType+'-button-up" type="button" value="" onclick="moveArticleUp(this,''+articleType+'')"/>' + 
'<input class="'+lowerArticleType+'-button-down" type="button" value="" onclick="moveArticleDown(this,''+articleType+'')"/>' + 
'</div>'+
'</div>';
return html;

我有一个函数删除文章行。

function removeArticleLine(button) {
var parentDiv = button.parentNode
var articleListDiv = parentDiv.parentNode;
articleListDiv.removeChild(parentDiv);
}

有一个问题，因为如果我删除一个对象段落，就不会改变它们的数量。我会请你给我一个提示，如何使用 JS 更改这些数字。 我正在添加可以帮助我们的工作功能。它正确地移动了一切：

function moveArticleUp(button, articleType) {
var articleDiv = button.parentNode.parentNode;
var parentDiv = articleDiv.parentNode;
var prevArticleDiv = articleDiv.previousElementSibling;
if (prevArticleDiv && prevArticleDiv.tagName == 'DIV') {
var articleIdValue = getArticleIdValue(articleType);
var ids = articleIdValue.split(',');
var articleId = getArticleIdFromArticleDiv(articleDiv, articleType);
var articleIdIndex = ids.indexOf(articleId);
swapPosition(ids, articleIdIndex, articleIdIndex - 1);
setArticleIdValue(articleType, ids.join());
removedArticleDiv = parentDiv.removeChild(articleDiv);
parentDiv.insertBefore(removedArticleDiv, prevArticleDiv);
console.log(articleIdIndex);
prevArticleDiv.firstElementChild.innerHTML = articleIdIndex + 1 + '<span style="vertical-align: top">.</span>  ';
articleDiv.firstElementChild.innerHTML = articleIdIndex + '<span style="vertical-align: top">.</span>  ';
}
}

function moveArticleDown(button, articleType) {
var articleDiv = button.parentNode.parentNode;
var parentDiv = articleDiv.parentNode;
var nextArticleDiv = articleDiv.nextElementSibling;
if (nextArticleDiv) {
var articleIdValue = getArticleIdValue(articleType);
console.log(articleIdValue);
var ids = articleIdValue.split(',');
var articleId = getArticleIdFromArticleDiv(articleDiv, articleType);
console.log(articleId);
var articleIdIndex = ids.indexOf(articleId);
console.log(articleIdIndex);
swapPosition(ids, articleIdIndex, articleIdIndex + 1);
setArticleIdValue(articleType, ids.join());
console.log(ids.join());
removedArticleDiv = parentDiv.removeChild(nextArticleDiv);
parentDiv.insertBefore(removedArticleDiv, articleDiv);
console.log(nextArticleDiv.firstElementChild.innerHTML);
console.log(articleDiv.firstElementChild.innerHTML);
nextArticleDiv.firstElementChild.innerHTML = articleIdIndex + 1 + '<span style="vertical-align: top">.</span>  ';
articleDiv.firstElementChild.innerHTML = articleIdIndex + 2 + '<span style="vertical-align: top">.</span>  ';
}
}

让我添加显示表的两个屏幕截图：

http://imgur.com/a/EOfkk

https://i.stack.imgur.com/KqdKR.jpg

Answer 1

删除一行后，您应该循环元素数组并为它们分配新编号。代码未经测试，但它应该可以工作

function removeArticleLine(button) {
var parentDiv = button.parentNode;
// getting the number of deleting div
var divNumber = parseInt(parentDiv.firstChild.textContent); 
var articleListDiv = parentDiv.parentNode;
articleListDiv.removeChild(parentDiv);
// we need to loop elements after deleted div, because elements before did not change theit number
for (var i = 0 || divNumber; i < articleListDiv.children.length; i++) {
//changing number
articleListDiv.children[i].firstElementChild.innerHTML = (i + 1) + '<span style="vertical-align: top">.</span> ';
}
}