Hermione Hermione - 11 days ago 5
jQuery Question

How delete cells from table, by adding a delete option in the context menu in jQuery?

I want to add a context menu on right click to each table data.
I try to delete the cell but it doesn't. This is the code. I know I have a problem with the method but I don't know how to fix it.
Here is my new code. Suggestions are welcomed.

<html>
<head>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <!-- jQuery source -->

<style type="text/css">
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}

/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
}

.custom-menu li:hover {
background-color: #DEF;
}

.bluebox {
box-shadow: 2px 2px 2px #888888;
width: 13px;
height: 3px;
padding: 0.5em;
float: bottom;
margin: 1px,1px,1px,1px;
background-color: #d3d7f8 ;

}

</style>
</head>
<body>
<ul class='custom-menu'>
<li data-action="delete">delete</li>
<li data-action="optionB">OptionB</li>
</ul>

<table id= "table1">
<tr>
<td class="bluebox">Test1</td>
<td class="bluebox">Test</td>
<td class="bluebox">Test</td>
<td class="bluebox">Test</td>
</tr>
<tr>
<td class="bluebox">Test1</td>
<td class="bluebox">Test</td>
<td class="bluebox">Test</td>
<td class="bluebox">Test</td>
</tr>
<tr>
<td class="bluebox">Test1</td>
<td class="bluebox">Test</td>
<td class="bluebox">Test</td>
<td class="bluebox">Test</td>
</tr>
</table>
<script type="text/javascript">
$('.bluebox').bind("contextmenu", function(event) {
event.preventDefault();
$(".custom-menu").finish().toggle(100).
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});

$(document).bind("mousedown", function(e) {
if (!$(e.target).parents(".custom-menu").length > 0) {
$(".custom-menu").hide(100);
}
});

$(".custom-menu li").click(function() {
// This is where I have the problem :
switch ($(this).attr("data-action")) {
case "delete":
$(this).closest('td').remove();
break;
case "optionB" : alert("optionB"); break; }
$(".custom-menu").hide(100);
});
</script>
</body>
</html>

Answer

You need to save the TD clicked:

var $currentTarget;
$(function() {
  $('.bluebox').on("contextmenu", function(event) {
    event.preventDefault();
    $currentTarget = $(this);    
    $(".custom-menu").finish().toggle(100).
    css({
      top: event.pageY + "px",
      left: event.pageX + "px"
    });
  });

  $(document).on("mousedown", function(e) {
    if (!$(e.target).parents(".custom-menu").length > 0) {
      $(".custom-menu").hide(100);
    }
  });

  $(".custom-menu li").click(function() {
    // This is where I have the problem : 
    switch ($(this).attr("data-action")) {
      case "delete":
        $currentTarget.remove();
        break;
      case "optionB":
        alert("optionB");
        break;
    }
    $(".custom-menu").hide(100);
  });
});
.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  overflow: hidden;
  border: 1px solid #CCC;
  white-space: nowrap;
  font-family: sans-serif;
  background: #FFF;
  color: #333;
  border-radius: 5px;
  padding: 0;
}
/* Each of the items in the list */

.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
  list-style-type: none;
  transition: all .3s ease;
}
.custom-menu li:hover {
  background-color: #DEF;
}
.bluebox {
  box-shadow: 2px 2px 2px #888888;
  width: 13px;
  height: 3px;
  padding: 0.5em;
  float: bottom;
  margin: 1px, 1px, 1px, 1px;
  background-color: #d3d7f8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class='custom-menu'>
  <li data-action="delete">delete</li>
  <li data-action="optionB">OptionB</li>
</ul>

<table id="table1">
  <tr>
    <td class="bluebox">Test1</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
  </tr>
  <tr>
    <td class="bluebox">Test1</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
  </tr>
  <tr>
    <td class="bluebox">Test1</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
    <td class="bluebox">Test</td>
  </tr>
</table>

Comments