How to delete a stackLayout that was is associated with a tabButton in a TabBar - qt

Question

I've created a Qt empty app where the qml code is the below.
What i want to do is i click on the button "add Tab" and create both the tab and the correspondent page. But if i delete (click on the remove Tab) it doesn't get completly removed!
If i click on "add Tab2" button it was supposed to appear the second page.
How can this be solved?
main.qml:
import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button{
id:createButton
text:"add Tab"
onClicked: { newTab(1) }
anchors.right: parent.right
anchors.bottom: parent.bottom
}
Button{
text:"remove Tab"
onClicked: { closeTab() }
anchors.right: createButton.left
anchors.bottom: parent.bottom
}
Button{
id:createButton2
text:"add Tab2"
onClicked: { newTab(2) }
anchors.left: parent.left
anchors.bottom: parent.bottom
}
function newTab (val) {
var c = Qt.createComponent("Panel_"+val+".qml")
var tab1 = c.createObject(content)
tabBar.addItem(tabButton.createObject(tabBar, {text: "teste", "font.pixelSize": 14} ))
}
function closeTab(){
var _contentData = tabBar.contentData
for (var i = 0; i < _contentData.length; ++i)
{
if( _contentData[i]['contentItem']['text']==="teste"){
var _removeItem = tabBar.itemAt(i);
tabBar.removeItem(_removeItem);
}
}
tabBar.setCurrentIndex(0)
}
header: TabBar {
id: tabBar
opacity:0.8
}
Component {
id: tabButton
TabButton {
font.pixelSize: 14
}
}
StackLayout {
id: content
currentIndex: tabBar.currentIndex
anchors.fill: parent
}
}
Panel_1.qml
import QtQuick 2.0
Item {
property string title: qsTr("panel1")
Text{text:"panel1"}
}
Panel_2 qml is the same thing as Panel_1.

Answer 1

You have removed the corresponding item from the TabButton but not the item corresponding to StackLayout, so you must remove the child with the same index, but when you are removing an item from a list you must iterate from the end to the beginning.
function closeTab(){
var _contentData = tabBar.contentData
for (var i = _contentData.length -1 ; i >= 0; --i)
{
if( _contentData[i]['contentItem']['text']==="teste"){
var _removeItem = tabBar.itemAt(i);
tabBar.removeItem(_removeItem);
content.children[i].destroy()
}
}
tabBar.setCurrentIndex(0)
}