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

Question

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>

dossy · Accepted Answer · 2018-10-04T13:17:39.043

0

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/.

edited Oct 04 '18 at 13:17

answered Oct 02 '18 at 20:26

dossy

1,617
16
26

Thanks @dossy. Actually, I want to remove the `div.clickable` elements when a user clicks on any other row of the original grid. By any other row, I mean, any row other than the one which was clicked very first time. Please let me know if that's what you were referring to in your answer. Thanks – Coder Oct 02 '18 at 22:11
As long as you don't add a new `div.clickable` element if the user clicks the same row multiple times, then this code should do what you want - remove all but the most recently added `div.clickable` element. Just use this _after_ you create the new `div.clickable` element to clean up the old ones. – dossy Oct 02 '18 at 22:23
Ok. So you are referring to put your code below this line `$(this).parent().append(newEl);` in my code above? – Coder Oct 02 '18 at 22:25
Yes, that's where I would start, and see if that behavior matches what you're looking for. – dossy Oct 02 '18 at 22:30
I tried putting it at that location and I noticed that I wasn't seeing the text anymore after the first time. I mean, when I clicked the table row for first time, I saw the text. And when I clicked on the text again, I didin't see any other text below it. – Coder Oct 02 '18 at 22:35
Yeah, you disable the click handler with your `$(this).off('click');` line, so you can only click on it once ... – dossy Oct 03 '18 at 02:07
Then it's unclear from your question what it is you're trying to achieve. Sorry. – dossy Oct 03 '18 at 03:15
I duplicated your snippet into my answer and cleaned up the click handler. Is that closer to what you were looking to achieve? If not, please describe in more specific detail exactly what behavior you're looking for, with actual examples and not dummy placeholder text. – dossy Oct 03 '18 at 03:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181231/discussion-between-coder-and-dossy). – Coder Oct 03 '18 at 15:07

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

1 Answers1