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

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

In the following code, when I click on any of the row of jQXgrid (basically this line $(".clickable").on("rowselect", handleClick); is executed), I see a text below the grid click me to display jQXGrid!. When I click on this text, I see this text again and it's displayed as long as user keep on clicking the latest text.

But I want to add this functionality:

Suppose a user has clicked the first row of the jQXgrid, he will see click me to display jQXGrid! text and the process will continue as long as user keep on clicking the latest text. However when a user clicks on the second row or any other row, I notice that the text click me to display jQXGrid! gets added after the latest text or div. I don't want this step.

What I am looking for is, as soon as a user clicks on the second row or any other row (except the one used previously (in our case it was row 1)), he should only see the text click me to display jQXGrid! and the chain could continue if user decides to keep on clicking the latest text again and again. Basically, the chain created when the first row was clicked gets destroyed and a new chain gets started as soon as user clicks on second row or any other row of the jQXgrid.

When I tried to use the following line of code inside handleClick function :

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

I noticed that as soon as I clicked the grid, it disappeared which makes sense since I removed the div containing the clickable class using above code. How can I achieve the functionality that I explained above?

Thanks.

Some jQXGrid related pointers if it helps someone in answering my question:

1) jQXGrid has destroy property to destroy the grid like this $(".clickable").jqxGrid("destroy");

2) I can get the index value of the row as far as the jQXgrid is concerned by putting this inside handleClick function : 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>

Solution

If you want to remove all of the newly added div.clickable elements, except the most recent one, try this:

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

Attempting to provide answer using OP's snippet:

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