当从数组javascript中删除一个项时，在重新渲染列表中出现问题

Question

我试图创建一个列表的文本，用户可以删除和编辑。但是当我试图实现它时，我遇到了一个问题，这是我目前的开发。

要创建列表，我通过使用

函数映射对象来呈现元素

function textContainer(e, color) {
var textForm = `
<form onsubmit="return false" class="form-inline my-2 text-form row" style="display:flex; justify-content:space-around;">
<input class="col-9 form-control mr-sm-2" type="text" id="newText"
placeholder="Name, Number etc">
<button class="col-2 btn btn-outline-primary my-2 my-sm-0" type="button"
onclick="addText(newText.value)">Add Text</button>
</form>
`;
var textLayer = '';
var id = 0;
var iconColor = 'black';
if (color != null) {
iconColor = color
}
canvas._objects.map(object => {
if (object.text != undefined) {
console.log(object.fill)
id += 1;
textLayer = `
<ul class="listTexts" style="padding :0;">
<li id="text-`+ id + `" class="buttonLists">
<span>`+ id + `. ` + object.text + `</span>
<div>
<i class="fas fa-trash-alt" style="margin:0px 5px;" onclick="removeTextById(`+ id + `)"></i>
</div>
</li>
</ul>
`;
}
});
if (canvas._objects.length == 1) {
$('.textContainer').append(textForm).html();
} else if (e == 'removed') {
$('.textContainer').append(textForm + textLayer).html();
} else if (e == 'changed') {
$('.listTexts').empty();
$('.listTexts').append(textLayer).html();
} else {
$('.textContainer').append(textLayer).html();
}
}

和删除基于他们的id的项目，像这样

function removeTextById(id) {
var array = canvas._objects.filter(function (el) {
return el.text != null
})
canvas.remove(array[id - 1]);
$('.textContainer').empty();
textContainer('removed');
canvas.renderAll();
}

这个很好，如果它只包含列表上的1或2个项目，我可以删除任何项目。但是当它包含2个以上，比如3个，它会移除2个li标签，如果是4个，它会移除3个li标签。我不知道发生了什么，但是我的对象是正确的，它只删除了一个项目。你可以在这里看到它的作用https://natestudio.my.id/3d-configurator在文本选项卡。

有人知道为什么会这样吗?

编辑canvas在我的应用程序是fabricjs画布，和canvas._objects返回列表的对象在画布内。我马上试着创建一个简单的复制

编辑2这是一个最小的复制https://jsfiddle.net/2758bskq/6/

Answer 1

在删除操作中，列表显示在这里:

else if (e == 'removed') {
$('.textContainer').append(textForm + textLayer).html();

执行之前，$('.textContainer')为空。由于textLayer只包含一个项(参见其上方的循环)，因此删除后最多将显示一个项。

所以一个问题是textLayer的收集:它应该收集所有相关的项目，而不仅仅是最后一个。所以取代:

textLayer =

:

textLayer +=

但是这将对其他场景(加法，…等)产生不良后果。为了避免这种情况，只需重新构建列表always。

因此将if (canvas._objects.length == 1) {和随后的整个if..else结构替换为:

$('.textContainer').empty().append(textForm + textLayer);

这将解决你提到的问题。

代码片段(减少了画布大小，以便专注于列表):

var canvas = this.__canvas = new fabric.Canvas('canvas', {
backgroundColor: 'white',
centeredScaling: true,
});
function addText(text) {
if (text != '') {
jerseyName = new fabric.IText(text, {
fontSize: 25,
textAlign: 'center',
fontWeight: 'bold',
left: 100,
top: 280,
originX: 'center',
originY: 'center',
selectable: true
});
canvas.add(jerseyName);
canvas.setActiveObject(jerseyName);
textContainer();
$('.text-form').each(function() {
this.reset();
});
}
}
function textContainer() {
var textForm = `
<form onsubmit="return false" class="form-inline my-2 text-form row" style="display:flex; justify-content:space-around;">
<input class="col-9 form-control mr-sm-2" type="text" id="newText"
placeholder="Name, Number etc">
<button class="col-2 btn btn-outline-primary my-2 my-sm-0" type="button"
onclick="addText(newText.value)">Add Text</button>
</form>
`;
var textLayer = '';
var id = 0;
canvas._objects.map(object => {
if (object.text != undefined) {
id += 1;
textLayer += `
<ul class="listTexts" style="padding :0;">
<li id="text-` + id + `" class="buttonLists">
<span>` + id + `. ` + object.text + `</span>
<div>
<button  onclick="removeTextById(` + id + `)">Remove</button>
</div>
</li>
</ul>
`;
}
});
$('.textContainer').empty().append(textForm + textLayer);
}
function removeTextById(id) {
var array = canvas._objects.filter(function(el) {
return el.text != null
})
canvas.remove(array[id - 1]);
textContainer();
canvas.renderAll();
}
textContainer();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" height="10" width="400"></canvas>
<div class="tab-pane p-3 textContainer" id="tabs-2" role="tabpanel" aria-labelledby="two-tab">
</div>