Javascript 我怎么能把棋子绑在它的路径上呢？

我希望能够将女王放在棋盘上，并轻松地将其移除，然后再将其放在其他地方。但是我遇到了一些问题。我创建了一个CSS类，用于将女王添加到董事会，以及一个用于将女王路径添加到董事会的类

我遇到的问题是，当我将女王从板上移除时，它的路径仍然保留在板上。所以我需要删除它的整个路径。见下文：

我插入了一个“X”图像以可视化所有皇后路径。我移走了第五排的皇后，但它的路径仍然是：

所以，我从移除它的水平和垂直路径开始，但在这个过程中我最终移除了其他皇后的路径。。。我仍然需要删除皇后的对角线路径，但这种方法显然效果不佳。

必须有更好的方法来处理这个问题。有什么想法吗？请记住，我是一个新手，我正在尝试构建我的第一个算法（“N皇后”算法）

$（文档）.ready（函数（）{
var queenCount=0；
var lastRow=0；
var-lastCol=0；
var-lastQ=0；
$（“li”）。每个（函数（）{
if（$（this）.hasClass（“queen”）==false&&
$（this.hasClass（“x”）==false）{
//添加女王
$（此）.addClass（“皇后”）；
queenCount=queenCount+1；
//皇后大道
$（this.prevAll（）.addClass（“x”）；
$（this.nextAll（）.addClass（“x”）；
//皇后大道
var index=$（this.index（）+1；
$（此）.parent（“ul”）.nextAll（“ul”）
.children（“：n个子项（+index+”）.addClass（“x”）；
$（本）.母公司（“ul”）.prevAll（“ul”）
.children（“：n个子项（+index+”）.addClass（“x”）；
//皇后斜路
交叉风险价值=指数+1；
$（this）.parent（“ul”）.nextAll（“ul”）.each（function（）{
$（this）.children（“：n个子项（“+cross+”））.addClass（“x”）；
交叉=交叉+1；
});
交叉=指数+1；
$（this）.parent（“ul”）.prevAll（“ul”）.each（function（）{
$（this）.children（“：n个子项（“+cross+”））.addClass（“x”）；
交叉=交叉+1；
});
交叉=指数-1；
$（this）.parent（“ul”）.prevAll（“ul”）.each（function（）{
$（this）.children（“：n个子项（“+cross+”））.addClass（“x”）；
交叉=交叉-1；
});
交叉=指数-1；
$（this）.parent（“ul”）.nextAll（“ul”）.each（function（）{
$（this）.children（“：n个子项（“+cross+”））.addClass（“x”）；
交叉=交叉-1；
});
//记住最后一条皇后之路
lastCol=$（this.index（）+1；
lastRow=$（this）.parent（“ul”）.index（）+1；
lastQ=这个；
}
});
//除掉最后的女王
$（“ul:n个子项（“+lastRow+”））
.儿童（“li:n个儿童（“+lastCol+”））
.removeClass（“女王”）；
queenCount=queenCount-1；
//去除水平范围；
$（lastQ.prevAll（）.removeClass（“x”）；
$（lastQ.nextAll（）.removeClass（“x”）；
//删除垂直范围
var index=$（lastQ）.index（）+1；
$（lastQ）.母公司（“ul”）.nextAll（“ul”）
.children（“：n个子项（+index+”）.removeClass（“x”）；
$（lastQ）.母公司（“ul”）.prevAll（“ul”）
.children（“：n个子项（+index+”）.removeClass（“x”）；
});
*{
框大小：边框框；
}
身体{
保证金：0；
填充：0；
}
保险商实验室{
宽度：800px；
高度：100px；
列表样式：无；
保证金：0；
填充：0；
轮廓：棕色；
}
李{
宽度：100px；
高度：100px；
浮动：左；
}
皇后夫人{
内容：url（“http://i.imgur.com/GAOSgVZ.png");
}
.x{
内容：url（“http://i.imgur.com/DGocFZb.png");
}