How to access the parent element of the element that was clicked?

Question

how to place my delete button so that onclick will return the whole <tr>

in the below code my jquery is clueless as which row to delete because onclick

is returning only this (i,e <td><button>Delete</button></td> )

please provide some optimal solution

 $('#example').on("click", "button", function(){ console.log($(this)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class="container"> <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Position</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Nixon</td> <td>System Architect</td> <td><button>Delete</button></td> </tr> <tr> <td>2</td> <td>Garrett Winters</td> <td>Accountant</td> <td><button>Delete</button></td> </tr> <tr> <td>3</td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td><button>Delete</button></td> </tr> <tr> <td>4</td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>5</td> <td>Airi Satou</td> <td>Accountant</td> <td><button>Delete</button></td> </tr> <tr> <td>6</td> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td><button>Delete</button></td> </tr> <tr> <td>7</td> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td><button>Delete</button></td> </tr> <tr> <td>8</td> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td><button>Delete</button></td> </tr> <tr> <td>9</td> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>10</td> <td>Sonya Frost</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>11</td> <td>Jena Gaines</td> <td>Office Manager</td> <td><button>Delete</button></td> </tr> <tr> <td>12</td> <td>Quinn Flynn</td> <td>Support Lead</td> <td><button>Delete</button></td> </tr> <tr> <td>13</td> <td>Charde Marshall</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>14</td> <td>Haley Kennedy</td> <td>Senior Marketing Designer</td> <td><button>Delete</button></td> </tr> <tr> <td>15</td> <td>Tatyana Fitzpatrick</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>16</td> <td>Michael Silva</td> <td>Marketing Designer</td> <td><button>Delete</button></td> </tr> <tr> <td>17</td> <td>Paul Byrd</td> <td>Chief Financial Officer (CFO)</td> <td><button>Delete</button></td> </tr> <tr> <td>18</td> <td>Gloria Little</td> <td>Systems Administrator</td> <td><button>Delete</button></td> </tr> <tr> <td>19</td> <td>Bradley Greer</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>20</td> <td>Dai Rios</td> <td>Personnel Lead</td> <td><button>Delete</button></td> </tr> <tr> <td>21</td> <td>Jenette Caldwell</td> <td>Development Lead</td> <td><button>Delete</button></td> </tr> <tr> <td>22</td> <td>Yuri Berry</td> <td>Chief Marketing Officer (CMO)</td> <td><button>Delete</button></td> </tr> <tr> <td>23</td> <td>Caesar Vance</td> <td>Pre-Sales Support</td> <td><button>Delete</button></td> </tr> <tr> <td>24</td> <td>Doris Wilder</td> <td>Sales Assistant</td> <td><button>Delete</button></td> </tr> <tr> <td>25</td> <td>Angelica Ramos</td> <td>Chief Executive Officer (CEO)</td> <td><button>Delete</button></td> </tr> <tr> <td>26</td> <td>Gavin Joyce</td> <td>Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>27</td> <td>Jennifer Chang</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>28</td> <td>Brenden Wagner</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>29</td> <td>Fiona Green</td> <td>Chief Operating Officer (COO)</td> <td><button>Delete</button></td> </tr> <tr> <td>30</td> <td>Shou Itou</td> <td>Regional Marketing</td> <td><button>Delete</button></td> </tr> <tr> <td>31</td> <td>Michelle House</td> <td>Integration Specialist</td> <td><button>Delete</button></td> </tr> <tr> <td>32</td> <td>Suki Burks</td> <td>Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>33</td> <td>Prescott Bartlett</td> <td>Technical Author</td> <td><button>Delete</button></td> </tr> <tr> <td>34</td> <td>Gavin Cortez</td> <td>Team Leader</td> <td><button>Delete</button></td> </tr> <tr> <td>35</td> <td>Martena Mccray</td> <td>Post-Sales support</td> <td><button>Delete</button></td> </tr> <tr> <td>36</td> <td>Unity Butler</td> <td>Marketing Designer</td> <td><button>Delete</button></td> </tr> <tr> <td>37</td> <td>Howard Hatfield</td> <td>Office Manager</td> <td><button>Delete</button></td> </tr> <tr> <td>38</td> <td>Hope Fuentes</td> <td>Secretary</td> <td><button>Delete</button></td> </tr> <tr> <td>39</td> <td>Vivian Harrell</td> <td>Financial Controller</td> <td><button>Delete</button></td> </tr> <tr> <td>40</td> <td>Timothy Mooney</td> <td>Office Manager</td> <td><button>Delete</button></td> </tr> <tr> <td>41</td> <td>Jackson Bradshaw</td> <td>Director</td> <td><button>Delete</button></td> </tr> <tr> <td>42</td> <td>Olivia Liang</td> <td>Support Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>43</td> <td>Bruno Nash</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>44</td> <td>Sakura Yamamoto</td> <td>Support Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>45</td> <td>Thor Walton</td> <td>Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>46</td> <td>Finn Camacho</td> <td>Support Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>47</td> <td>Serge Baldwin</td> <td>Data Coordinator</td> <td><button>Delete</button></td> </tr> <tr> <td>48</td> <td>Zenaida Frank</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>49</td> <td>Zorita Serrano</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>50</td> <td>Jennifer Acosta</td> <td>Junior Javascript Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>51</td> <td>Cara Stevens</td> <td>Sales Assistant</td> <td><button>Delete</button></td> </tr> <tr> <td>52</td> <td>Hermione Butler</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>53</td> <td>Lael Greer</td> <td>Systems Administrator</td> <td><button>Delete</button></td> </tr> <tr> <td>54</td> <td>Jonas Alexander</td> <td>Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>55</td> <td>Shad Decker</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>56</td> <td>Michael Bruce</td> <td>Javascript Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>57</td> <td>Donna Snider</td> <td>Customer Support</td> <td><button>Delete</button></td> </tr> </tbody> </table> </div> 

Answer 1

$('#example').on("click", "button", function(){
    $(this).parents('tr').remove(); //note the 's' in parents()
});

Answer 2

Actually it returns the <button> (and not the <td><button>Delete</button></td> ).

If you want to find the <tr> parent you should use the parents function:

$(this).parents('tr');

Here is the fix to your code:

 $('#example').on("click", "button", function(){ console.log($(this).parents('tr')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class="container"> <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Position</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Nixon</td> <td>System Architect</td> <td><button>Delete</button></td> </tr> <tr> <td>2</td> <td>Garrett Winters</td> <td>Accountant</td> <td><button>Delete</button></td> </tr> <tr> <td>3</td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td><button>Delete</button></td> </tr> <tr> <td>4</td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>5</td> <td>Airi Satou</td> <td>Accountant</td> <td><button>Delete</button></td> </tr> <tr> <td>6</td> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td><button>Delete</button></td> </tr> <tr> <td>7</td> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td><button>Delete</button></td> </tr> <tr> <td>8</td> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td><button>Delete</button></td> </tr> <tr> <td>9</td> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>10</td> <td>Sonya Frost</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>11</td> <td>Jena Gaines</td> <td>Office Manager</td> <td><button>Delete</button></td> </tr> <tr> <td>12</td> <td>Quinn Flynn</td> <td>Support Lead</td> <td><button>Delete</button></td> </tr> <tr> <td>13</td> <td>Charde Marshall</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>14</td> <td>Haley Kennedy</td> <td>Senior Marketing Designer</td> <td><button>Delete</button></td> </tr> <tr> <td>15</td> <td>Tatyana Fitzpatrick</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>16</td> <td>Michael Silva</td> <td>Marketing Designer</td> <td><button>Delete</button></td> </tr> <tr> <td>17</td> <td>Paul Byrd</td> <td>Chief Financial Officer (CFO)</td> <td><button>Delete</button></td> </tr> <tr> <td>18</td> <td>Gloria Little</td> <td>Systems Administrator</td> <td><button>Delete</button></td> </tr> <tr> <td>19</td> <td>Bradley Greer</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>20</td> <td>Dai Rios</td> <td>Personnel Lead</td> <td><button>Delete</button></td> </tr> <tr> <td>21</td> <td>Jenette Caldwell</td> <td>Development Lead</td> <td><button>Delete</button></td> </tr> <tr> <td>22</td> <td>Yuri Berry</td> <td>Chief Marketing Officer (CMO)</td> <td><button>Delete</button></td> </tr> <tr> <td>23</td> <td>Caesar Vance</td> <td>Pre-Sales Support</td> <td><button>Delete</button></td> </tr> <tr> <td>24</td> <td>Doris Wilder</td> <td>Sales Assistant</td> <td><button>Delete</button></td> </tr> <tr> <td>25</td> <td>Angelica Ramos</td> <td>Chief Executive Officer (CEO)</td> <td><button>Delete</button></td> </tr> <tr> <td>26</td> <td>Gavin Joyce</td> <td>Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>27</td> <td>Jennifer Chang</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>28</td> <td>Brenden Wagner</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>29</td> <td>Fiona Green</td> <td>Chief Operating Officer (COO)</td> <td><button>Delete</button></td> </tr> <tr> <td>30</td> <td>Shou Itou</td> <td>Regional Marketing</td> <td><button>Delete</button></td> </tr> <tr> <td>31</td> <td>Michelle House</td> <td>Integration Specialist</td> <td><button>Delete</button></td> </tr> <tr> <td>32</td> <td>Suki Burks</td> <td>Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>33</td> <td>Prescott Bartlett</td> <td>Technical Author</td> <td><button>Delete</button></td> </tr> <tr> <td>34</td> <td>Gavin Cortez</td> <td>Team Leader</td> <td><button>Delete</button></td> </tr> <tr> <td>35</td> <td>Martena Mccray</td> <td>Post-Sales support</td> <td><button>Delete</button></td> </tr> <tr> <td>36</td> <td>Unity Butler</td> <td>Marketing Designer</td> <td><button>Delete</button></td> </tr> <tr> <td>37</td> <td>Howard Hatfield</td> <td>Office Manager</td> <td><button>Delete</button></td> </tr> <tr> <td>38</td> <td>Hope Fuentes</td> <td>Secretary</td> <td><button>Delete</button></td> </tr> <tr> <td>39</td> <td>Vivian Harrell</td> <td>Financial Controller</td> <td><button>Delete</button></td> </tr> <tr> <td>40</td> <td>Timothy Mooney</td> <td>Office Manager</td> <td><button>Delete</button></td> </tr> <tr> <td>41</td> <td>Jackson Bradshaw</td> <td>Director</td> <td><button>Delete</button></td> </tr> <tr> <td>42</td> <td>Olivia Liang</td> <td>Support Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>43</td> <td>Bruno Nash</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>44</td> <td>Sakura Yamamoto</td> <td>Support Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>45</td> <td>Thor Walton</td> <td>Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>46</td> <td>Finn Camacho</td> <td>Support Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>47</td> <td>Serge Baldwin</td> <td>Data Coordinator</td> <td><button>Delete</button></td> </tr> <tr> <td>48</td> <td>Zenaida Frank</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>49</td> <td>Zorita Serrano</td> <td>Software Engineer</td> <td><button>Delete</button></td> </tr> <tr> <td>50</td> <td>Jennifer Acosta</td> <td>Junior Javascript Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>51</td> <td>Cara Stevens</td> <td>Sales Assistant</td> <td><button>Delete</button></td> </tr> <tr> <td>52</td> <td>Hermione Butler</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>53</td> <td>Lael Greer</td> <td>Systems Administrator</td> <td><button>Delete</button></td> </tr> <tr> <td>54</td> <td>Jonas Alexander</td> <td>Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>55</td> <td>Shad Decker</td> <td>Regional Director</td> <td><button>Delete</button></td> </tr> <tr> <td>56</td> <td>Michael Bruce</td> <td>Javascript Developer</td> <td><button>Delete</button></td> </tr> <tr> <td>57</td> <td>Donna Snider</td> <td>Customer Support</td> <td><button>Delete</button></td> </tr> </tbody> </table> </div> 

Answer 3

Another variation working just as well

 $('#example').on("click", "button", function(e){ $(e.target).closest('tr').remove(); });