如果单击网格/表格的新行，则尝试删除 div

Question

在下面的代码中，当我点击jQXgrid的任何一行(基本上是这一行$(".clickable").on("rowselect", handleClick);被执行(时，我看到网格下方的文本click me to display jQXGrid!。 当我单击此文本时，我再次看到此文本，只要用户继续单击最新文本，它就会显示。

但我想添加此功能：

假设用户单击了jQXgrid的第一行，他将看到click me to display jQXGrid!文本，只要用户继续单击最新文本，该过程就会继续。然而 当用户单击第二行或任何其他行时，我注意到文本click me to display jQXGrid!被添加到最新的文本或div 之后。我不想要这一步。

我正在寻找的是，一旦用户单击第二行或任何其他行(除了之前使用的行(在我们的例子中是第 1 行((，他应该只看到文本click me to display jQXGrid!和 如果用户决定一次又一次地继续点击最新文本，则链可以继续。基本上，单击第一行时创建的链将被销毁，并且 一旦用户点击第二行或jQXgrid的任何其他行，一个新的链就会启动。

当我尝试在函数内使用以下代码行handleClick：

if($(".clickable").length != 0){
$(".clickable").remove();
}

我注意到，一旦我单击网格，它就消失了，这是我使用上面的代码删除了包含可点击类的div。如何实现我上面解释的功能？

谢谢。

一些jQXGrid相关的指针，如果它可以帮助某人回答我的问题：

1(jQXGrid有破坏属性来破坏网格，就像这样$(".clickable").jqxGrid("destroy");

2(我可以通过将它放在函数handleClick中来获取jQXgrid所关注的行的索引值：console.log(e.args.rowindex);

var source = {
localdata: [
["https://www.samplelink.com", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
["https://www.samplelink.com", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
["https://www.samplelink.com", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
["https://www.samplelink.com", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
["https://www.samplelink.com", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
["https://www.samplelink.com", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
],
datafields: [{
name: 'link',
type: 'string',
map: '0'
},
{
name: 'ContactName',
type: 'string',
map: '1'
},
{
name: 'Title',
type: 'string',
map: '2'
},
{
name: 'Address',
type: 'string',
map: '3'
},
{
name: 'City',
type: 'string',
map: '4'
},
{
name: 'Country',
type: 'string',
map: '5'
}
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(".clickable").jqxGrid({
width: 800,
height: 270,
source: dataAdapter,
columnsresize: true,
sortable: true,
columns: [{
text: 'Link',
datafield: 'link',
width: 200
},
{
text: 'Contact Name',
datafield: 'ContactName',
width: 150
},
{
text: 'Contact Title',
datafield: 'Title',
width: 100
},
{
text: 'Address',
datafield: 'Address',
width: 100
},
{
text: 'City',
datafield: 'City',
width: 100
},
{
text: 'Country',
datafield: 'Country'
}
]
});
var id = 1;
$(".clickable").on("rowselect", handleClick);
function handleClick(e) {
var newEl = $("<div/>", {
class: "clickable",
id: "grid" + id,
style: "margin:100px 10px 20px 200px ",
text: 'click me to display jQXGrid!'
}).append($("<div />", {
id: "button"
}));
// console.log("Test Row Index Value");
//console.log(e.args.rowindex); 

//$("#button").jqxButton({ value: 'Export Grid '});

id++;
console.log("Value of ID here:" + id);
// add click Event listener to the newly created div, the same function(here I name irt 'handleClick') is the handler.
newEl.on('click', handleClick);

$(this).parent().append(newEl);
// remove click Event from the current clicked div.
$(this).off('click');
}

.test {
margin: 100px 10px 20px 200px;
}

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<div class="wrapper">
<div id="grid" class="clickable" style="margin:100px 10px 20px 200px;"></div>
</div>

Answer 1

如果要删除所有新添加的div.clickable元素(最新的元素除外(，请尝试以下操作：

$('#grid').nextAll('.clickable').slice(0, -1).remove();

尝试使用 OP 的代码片段提供答案：

在聊天中与@Coder澄清后，我们能够在 http://jsfiddle.net/amo4qLb8/44/中实现他/她正在寻找的实现。