使用javascript删除表格的行

Question

I have sample code as follows :

<table id='emailTable'>
<tr id='tablecontent'>
<td>
</td>
<td>
<a ....>delete</a>
</td>
</tr>

<tr id='tablecontent'>
<td>
</td>
<td>

</td>
</tr>

<tr id='tablecontent'>
<td>
</td>
<td>
<a ....>delete</a>
</td>
</tr>

<tr id='tablecontent'>
<td>
</td>
<td>

</td>
</tr>
<table>

Here, I want to delete the row onclick of delete link with the next row.

Have tried with 'parentNode' and removechild with currentNode but nothing happens.

Answer 1

you can attach an event listener to a for click event and use $(this).parents('tr') inside event handler to access parent row. something like this:

 $('a').on('click', function(e){ e.preventDefault(); $(this).parents('tr').remove(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='emailTable'> <tr id='tablecontent'> <td> </td> <td> <a href="">delete</a> </td> </tr> <tr id='tablecontent'> <td> </td> <td> </td> </tr> <tr id='tablecontent'> <td> </td> <td> <a href="">delete</a> </td> </tr> <tr id='tablecontent'> <td> </td> <td> </td> </tr> <table> 

Answer 2

Here you go table row removal using JavaScript:

// get all rows
var rows = document
  .querySelectorAll("#emailTable tr#tablecontent");
// create a find parent function
// since JavaScript do not have $(elem).parent("tr")
// which automatically search a parent or parent of parents that is a <tr>
var findParent = function (node, tagName)
{
   var recursiveSearch = function(node, tagName)
   {
      // you can change the condition as you see fit.
      return node.parentNode.tagName.toLowerCase() == tagName.toLowerCase() ? node.parentNode : recursiveSearch(node.parentNode, tagName);
   };

   // do a recursive search based from passed node if it matches with a given tag name.
   return recursiveSearch(node, tagName);
};

// loop through each row
rows.forEach(function (item)
{
   // find the delete element
   var deleteElem = item.querySelector("td a.delete");

   // if there is an delete element
   if (deleteElem)
   {
       // add event listener
       deleteElem.addEventListener("click", function ()
       {
          // find parent element that is a <tr>
          var row = findParent(this, "tr");
          // remove the row
          row.remove();
       });
   }
});

working fiddle

hope that helps