单击 grid/table 的新行时尝试删除 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();
                }

我注意到，一旦我点击网格，它就消失了，这是有道理的，因为我使用上面的代码删除了包含可点击 class 的 div。我怎样才能实现上面解释的功能？

谢谢。

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

1) jQXGrid 已经 destroy 属性像这样销毁网格 $(".clickable").jqxGrid("destroy");

2) 就 jQXgrid 而言，我可以通过将其放入 handleClick 函数中来获取行的索引值：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 的代码段提供答案：

在 chat, we were able to arrive an implementation that achieves what he/she was looking for, in http://jsfiddle.net/amo4qLb8/44/.

中与@Coder 澄清后

单击 grid/table 的新行时尝试删除 div

Trying to delete divs if a new row of the grid/table is clicked

html

javascript

jquery

jqxgrid