What is the best way to remove a table row with jQuery

Question

What is the best method for removing a table row with jQuery

User · Accepted Answer

You re right       myTableRow   remove      This works fine if your row has an id  such as    lt tr id  myTableRow  gt  lt td gt blah lt  td gt  lt  tr gt    If you don t have an id  you can use any of jQuery s plethora of selectors

User · Answer

If the row you want to delete might change you can use this   Just pass this function the row   you wish to delete   function removeMyRow docRowCount         table tr   eq docRowCount  remove

User · Answer

id is not a good selector now  You can define some properties on the rows  And you can use them as selector    lt tr category  petshop  type  fish  gt  lt td gt little fish lt  td gt  lt  tr gt   lt tr category  petshop  type  dog  gt  lt td gt little dog lt  td gt  lt  tr gt   lt tr category  toys  type  lego  gt  lt td gt lego starwars lt  td gt  lt  tr gt    and you can use a func to select the row like this  ES6    const rowRemover    category type   gt         tr category   category   type   type     remove       rowRemover  petshop   fish

User · Answer

try this for size    this  parents  tr   first   remove      full listing    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN           http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  lang  en  xml lang  en  gt   lt head gt     lt script type  text javascript  src  http   code jquery com jquery-1 4 3 min js  gt  lt  script gt     lt script type  text javascript  gt        document  ready function                 deleteRowButton   click DeleteRow                  function DeleteRow                 this  parents  tr   first   remove             lt  script gt   lt  head gt   lt body gt     lt table gt       lt tr gt  lt td gt foo lt  td gt        lt td gt  lt a class  deleteRowButton  gt delete row lt  a gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt bar bar lt  td gt        lt td gt  lt a class  deleteRowButton  gt delete row lt  a gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt bazmati lt  td gt        lt td gt  lt a class  deleteRowButton  gt delete row lt  a gt  lt  td gt  lt  tr gt     lt  table gt   lt  body gt   lt  html gt    see it in action

User · Answer

Is the following acceptable       myTableRow   remove

User · Answer

tr   click function          this  remove           i think you will try the above code  as it work  but i don t know why it work for sometime and then the whole table is removed  i am also trying to remove the row by click the row  but could not find exact answer

User · Answer

If the row you want to delete might change you can use this   Just pass this function the row   you wish to delete   function removeMyRow docRowCount         table tr   eq docRowCount  remove

User · Answer

I appreciate this is an old post  but I was looking to do the same  and found the accepted answer didn t work for me  Assuming JQuery has moved on since this was written   Anyhow  I found the following worked for me       resultstbl tr id nameoftr    remove      Not sure if this helps anyone  My example above was part of a larger function so not wrapped it in an event listener

User · Answer

myTable tr   click function          this  remove        return false        Even a better one       MyTable   on  click     DeleteButton   function          this  closest  tr   remove

User · Answer

You can use       this  closest  tr      for finding the parent table row of an element    It is more elegant than parent   parent   which is what I started out doing and soon learnt the error of my ways   --Edit -- Someone pointed out that the question was about removing the row         this  closest  tr    remove     As pointed out below you can simply do     this  closest  tr   remove      A similar code snippet can be used for many operations such as firing events on multiple elements

User · Answer

Assuming you have a button link inside of a data cell in your table  something like this would do the trick         delete   live  click   function event          this  parent   parent   remove          This will remove the parent of the parent of the button link that is clicked  You need to use parent   because it is a jQuery object  not a normal DOM object  and you need to use parent   twice  because the button lives inside a data cell  which lives inside a row    which is what you want to remove    this  is the button clicked  so simply having something like this will remove only the button     this  remove      While this will remove the data cell         this  parent   remove      If you want to simply click anywhere on the row to remove it something like this would work  You could easily modify this to prompt the user or work only on a double-click       delete   live  click   function event          this  parent   remove          Hope that helps   I struggled on this a bit myself

User · Answer

The easiest method to remove rows from table     Remove row of table using its unique ID  Remove based on the order index of that row  Ex  remove the third or fifth row    For example     lt table id  myTable  border  1  gt       lt tr id  tr1  gt  lt td gt Row1 lt  td gt  lt  tr gt       lt tr id  tr2  gt  lt td gt Row2 lt  td gt  lt  tr gt       lt tr id  tr3  gt  lt td gt Row3 lt  td gt  lt  tr gt       lt tr id  tr4  gt  lt td gt Row4 lt  td gt  lt  tr gt       lt tr id  tr5  gt  lt td gt Row5 lt  td gt  lt  tr gt     lt  table gt           REMOVE TABLE ROW            1  remove spesific row using its ID     tr1   remove       2  remove spesific row using its order or index    row index started from 0-n  Row1 index is 0  Row2 index is 1 and so on      myTable   find  tr eq 2    remove     removing Row3

User · Answer

try this for size    this  parents  tr   first   remove      full listing    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN           http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  lang  en  xml lang  en  gt   lt head gt     lt script type  text javascript  src  http   code jquery com jquery-1 4 3 min js  gt  lt  script gt     lt script type  text javascript  gt        document  ready function                 deleteRowButton   click DeleteRow                  function DeleteRow                 this  parents  tr   first   remove             lt  script gt   lt  head gt   lt body gt     lt table gt       lt tr gt  lt td gt foo lt  td gt        lt td gt  lt a class  deleteRowButton  gt delete row lt  a gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt bar bar lt  td gt        lt td gt  lt a class  deleteRowButton  gt delete row lt  a gt  lt  td gt  lt  tr gt       lt tr gt  lt td gt bazmati lt  td gt        lt td gt  lt a class  deleteRowButton  gt delete row lt  a gt  lt  td gt  lt  tr gt     lt  table gt   lt  body gt   lt  html gt    see it in action

User · Answer

function removeRow row          row  remove        lt tr onmousedown  removeRow this   gt  lt td gt Foo lt  td gt  lt  tr gt    Maybe something like this could work as well  I haven t tried doing something with  this   so I don t know if it works or not

User · Answer

myTable tr   click function          this  remove        return false        Even a better one       MyTable   on  click     DeleteButton   function          this  closest  tr   remove

User · Answer

I appreciate this is an old post  but I was looking to do the same  and found the accepted answer didn t work for me  Assuming JQuery has moved on since this was written   Anyhow  I found the following worked for me       resultstbl tr id nameoftr    remove      Not sure if this helps anyone  My example above was part of a larger function so not wrapped it in an event listener

User · Answer

Another one by empty        this  closest  tr   empty

User · Answer

All you have to do is to remove the table row   lt tr gt   tag from your table  For example here is the code to remove the last row from the table          myTable tr last   remove       Code above was taken from this jQuery Howto post

User · Answer

Is the following acceptable       myTableRow   remove

User · Answer

tr   click function          this  remove           i think you will try the above code  as it work  but i don t know why it work for sometime and then the whole table is removed  i am also trying to remove the row by click the row  but could not find exact answer

User · Answer

function removeRow row          row  remove        lt tr onmousedown  removeRow this   gt  lt td gt Foo lt  td gt  lt  tr gt    Maybe something like this could work as well  I haven t tried doing something with  this   so I don t know if it works or not

User · Answer

if you have HTML like this    lt tr gt    lt td gt  lt span class  spanUser  userid  123  gt  lt  span gt  lt  td gt    lt td gt  lt span class  spanUser  userid  123  gt  lt  span gt  lt  td gt   lt  tr gt    where userid  123  is a custom attribute that you can populate dynamically when you build the table   you can use something like         spanUser   live  click   function               var span     this              var userid     this  attr  userid             var currentURL   window location protocol          window location host          var url   currentURL     Account DeleteUser     userid             post url  function  data              if  data                       var tdTAG   span parent       GET PARENT OF SPAN TAG                    var trTAG   tdTAG parent       GET PARENT OF TD TAG                    trTAG remove       DELETE TR TAG    DELETE AN ENTIRE TABLE ROW                 else                   alert  Sorry  there is some error                                            So in that case you don t know the class or id of the TR tag but anyway you are able to delete it

User · Answer

You can use       this  closest  tr      for finding the parent table row of an element    It is more elegant than parent   parent   which is what I started out doing and soon learnt the error of my ways   --Edit -- Someone pointed out that the question was about removing the row         this  closest  tr    remove     As pointed out below you can simply do     this  closest  tr   remove      A similar code snippet can be used for many operations such as firing events on multiple elements

User · Answer

myTable tr   click function          this  remove        return false        Even a better one       MyTable   on  click     DeleteButton   function          this  closest  tr   remove

User · Answer

Is the following acceptable       myTableRow   remove

User · Answer

id is not a good selector now  You can define some properties on the rows  And you can use them as selector    lt tr category  petshop  type  fish  gt  lt td gt little fish lt  td gt  lt  tr gt   lt tr category  petshop  type  dog  gt  lt td gt little dog lt  td gt  lt  tr gt   lt tr category  toys  type  lego  gt  lt td gt lego starwars lt  td gt  lt  tr gt    and you can use a func to select the row like this  ES6    const rowRemover    category type   gt         tr category   category   type   type     remove       rowRemover  petshop   fish

User · Answer

tr   click function          this  remove           i think you will try the above code  as it work  but i don t know why it work for sometime and then the whole table is removed  i am also trying to remove the row by click the row  but could not find exact answer

User · Answer

Assuming you have a button link inside of a data cell in your table  something like this would do the trick         delete   live  click   function event          this  parent   parent   remove          This will remove the parent of the parent of the button link that is clicked  You need to use parent   because it is a jQuery object  not a normal DOM object  and you need to use parent   twice  because the button lives inside a data cell  which lives inside a row    which is what you want to remove    this  is the button clicked  so simply having something like this will remove only the button     this  remove      While this will remove the data cell         this  parent   remove      If you want to simply click anywhere on the row to remove it something like this would work  You could easily modify this to prompt the user or work only on a double-click       delete   live  click   function event          this  parent   remove          Hope that helps   I struggled on this a bit myself

User · Answer

Easy   Try this     table td img delete   click function            this  parent   parent   parent   fadeTo 400  0  function                 this  remove                return false

User · Answer

function removeRow row          row  remove        lt tr onmousedown  removeRow this   gt  lt td gt Foo lt  td gt  lt  tr gt    Maybe something like this could work as well  I haven t tried doing something with  this   so I don t know if it works or not

User · Answer

The easiest method to remove rows from table     Remove row of table using its unique ID  Remove based on the order index of that row  Ex  remove the third or fifth row    For example     lt table id  myTable  border  1  gt       lt tr id  tr1  gt  lt td gt Row1 lt  td gt  lt  tr gt       lt tr id  tr2  gt  lt td gt Row2 lt  td gt  lt  tr gt       lt tr id  tr3  gt  lt td gt Row3 lt  td gt  lt  tr gt       lt tr id  tr4  gt  lt td gt Row4 lt  td gt  lt  tr gt       lt tr id  tr5  gt  lt td gt Row5 lt  td gt  lt  tr gt     lt  table gt           REMOVE TABLE ROW            1  remove spesific row using its ID     tr1   remove       2  remove spesific row using its order or index    row index started from 0-n  Row1 index is 0  Row2 index is 1 and so on      myTable   find  tr eq 2    remove     removing Row3

User · Answer

Is the following acceptable       myTableRow   remove

User · Answer

Easy   Try this     table td img delete   click function            this  parent   parent   parent   fadeTo 400  0  function                 this  remove                return false

User · Answer

function removeRow row          row  remove        lt tr onmousedown  removeRow this   gt  lt td gt Foo lt  td gt  lt  tr gt    Maybe something like this could work as well  I haven t tried doing something with  this   so I don t know if it works or not

User · Answer

tr   click function          this  remove           i think you will try the above code  as it work  but i don t know why it work for sometime and then the whole table is removed  i am also trying to remove the row by click the row  but could not find exact answer

User · Answer

If you are using Bootstrap Tables  add this code snippet to your bootstrap table js  BootstrapTable prototype removeRow   function  params        if   params hasOwnProperty  index              return             var len   this options data length       if   params index  gt  len      params index  lt  0            return             this options data splice params index  1        if  len     this options data length            return             this initSearch        this initPagination        this initBody true        Then in your var allowedMethods      add  removeRow   Finally you can use     your-table   bootstrapTable  removeRow   index 1     Credits to this post

User · Answer

if you have HTML like this    lt tr gt    lt td gt  lt span class  spanUser  userid  123  gt  lt  span gt  lt  td gt    lt td gt  lt span class  spanUser  userid  123  gt  lt  span gt  lt  td gt   lt  tr gt    where userid  123  is a custom attribute that you can populate dynamically when you build the table   you can use something like         spanUser   live  click   function               var span     this              var userid     this  attr  userid             var currentURL   window location protocol          window location host          var url   currentURL     Account DeleteUser     userid             post url  function  data              if  data                       var tdTAG   span parent       GET PARENT OF SPAN TAG                    var trTAG   tdTAG parent       GET PARENT OF TD TAG                    trTAG remove       DELETE TR TAG    DELETE AN ENTIRE TABLE ROW                 else                   alert  Sorry  there is some error                                            So in that case you don t know the class or id of the TR tag but anyway you are able to delete it

User · Answer

Another one by empty        this  closest  tr   empty

User · Answer

If you are using Bootstrap Tables  add this code snippet to your bootstrap table js  BootstrapTable prototype removeRow   function  params        if   params hasOwnProperty  index              return             var len   this options data length       if   params index  gt  len      params index  lt  0            return             this options data splice params index  1        if  len     this options data length            return             this initSearch        this initPagination        this initBody true        Then in your var allowedMethods      add  removeRow   Finally you can use     your-table   bootstrapTable  removeRow   index 1     Credits to this post

User · Answer

myTable tr   click function          this  remove        return false        Even a better one       MyTable   on  click     DeleteButton   function          this  closest  tr   remove

User · Answer

All you have to do is to remove the table row   lt tr gt   tag from your table  For example here is the code to remove the last row from the table          myTable tr last   remove       Code above was taken from this jQuery Howto post

[javascript] What is the best way to remove a table row with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html-table