removing parent of a parent div

Question

I have a form that if user clicks remove, i need to remove the whole row.

            <div id='a_<?php echo $a;?>'>
                    <div class='leftDesc'>Code</div>
                    <div class='inputText'><input type='text' name='code[]' value='<?php echo $code;?>' id='code[]'></div>
                    <div class='centerDesc'>Description</div>
                    <div class='inputText'><input type='text' name='desc[]' value='<?php echo $desc;?>' size='32' maxlength='32' id='desc[]'></div>
                    <div class='centerDesc'><input type='button' class='remDisp' value='Remove Code' id='removeCode_<?php echo $a;?>'></div>
            </div>

when user clicks remove button, i want to remove the whole row (the div a_$a)

how do i write basically:

$(this).parent().parent().remove();

lol. that works. parent.parent seemed way to silly to write. please forgive such a ridiculous question..... — bart2puck, Nov 25 '13 at 18:17
if you know parent's id `$(this).parents('#parent id').remove();` — Alexandru Diacov, Nov 25 '13 at 18:17
This question appears to be off-topic because the OP answered his own question in his question. — j08691, Nov 25 '13 at 18:18
@AlexandreDiacov if you know parent's id, then just remove it: `$('#parent_id').remove();` — A. Wolff, Nov 25 '13 at 18:18
possible duplicate of http://stackoverflow.com/questions/2369913/jquery-selecting-grandparents — Josh Crozier, Nov 25 '13 at 18:20
well, i want to delete this to avoid the embarassment, at least this is here for someone else to find :) — bart2puck, Nov 25 '13 at 18:20

m59 · Accepted Answer · 2013-11-25T18:34:18.620

If you're looking for an alternative approach that isn't dependent on the element position, associate them by a data attribute or class, like this: Live demo here (click).

<div id="bar"></div>
<button class="remDisp" data-foo="bar">Some Button</button>

<script>
  $(document).ready(function() {

    var buttons = $('.remDisp'); //get a reference to your buttons
    buttons.click(function() { //add the click function to the buttons
      var foo = $(this).attr('data-foo'); //get "foo" attr (value of "bar" in this case)
      $('#'+foo).remove(); //find the element with id of foo's value (bar)
    });

  });
<script>

Do you mean "Where do I put my javascript code and how do I attach it to the button?"

<script>
  $(document).ready(function() {

    var buttons = $('.remDisp'); //get a reference to your buttons
    buttons.click(function() { //add the click function to the buttons
      $(this).parent().parent().remove(); //remove the grandparent of the clicked button.
    });

  });
<script>

i appreciate the response. the answer was user silliness. ill tick ya. — bart2puck, Nov 25 '13 at 18:59

removing parent of a parent div

1 Answers1