Load content into parent element with jquery

Question

I have a div element with a specific ID

<div id='someid'>
    <input type='submit' class='edit' value='Edit'>
</div>

When the button is pressed, I want to select the parent element (in this case the div element) and load content into it. I've tried:

$(document).ready(function(){
  $(".edit").click(function(){
    var id = $(this).parent().get(0).id;
    $(id).load("contentpage");
  });
});

But this doesn't work, presumably because I am not selecting the parent in the right way? If I print out the id variable, it does have the right value ('someid'), but I guess $(id) is where I am wrong?

Answer 1

The reason it's not working is because your selector is "someid" instead of "#someid", but there is a simpler way:

$(document).ready(function(){
  $(".edit").click(function(){
    $(this).parent().load("contentpage");
  });
});

Answer 2

You don’t need to use another query, parent already returns the parent element:

$(document).ready(function(){
  $(".edit").click(function(){
    $(this).parent().load("contentpage");
  });
});

Answer 3

Just daisy chain the call. You are not selecting the ID correctly.

$(this).parent().load("contentpage")