javascript - Get parent div id by clicking on a child element - Stack Overflow

admin管理员组

文章数量:1387419

What I'm looking to do is remove the parenting div by ID after the button is clicked, to avoid closing all divs with the same class. In my actual code, the user is able to append multiple divs to the screen on button click, and each is assigned it's own ID. Each has a boostrap button up top that should close the parent div only instead of having to create 12 separate functions (the limit of div placement for the user).

HTML

<div class='some classes' id='box1'>
<span class='btn btn-primary'>Close this div</span>
</div>
<div class='some classes' id='box2'>
<span class='btn btn-primary'>Close this div</span>
</div>

CSS

#box {
  width:200px;
  height:200px;
  background:black;
}

JS

$(document).ready(function(){
  $('.btn').on('click',function(){
    var getParentID = $('.btn').parent().attr('id');
    $(getParentID).remove();
});
});

This is essentially all I was working with to try to get it to function. Any help is much appreciated!

What I'm looking to do is remove the parenting div by ID after the button is clicked, to avoid closing all divs with the same class. In my actual code, the user is able to append multiple divs to the screen on button click, and each is assigned it's own ID. Each has a boostrap button up top that should close the parent div only instead of having to create 12 separate functions (the limit of div placement for the user).

HTML

<div class='some classes' id='box1'>
<span class='btn btn-primary'>Close this div</span>
</div>
<div class='some classes' id='box2'>
<span class='btn btn-primary'>Close this div</span>
</div>

CSS

#box {
  width:200px;
  height:200px;
  background:black;
}

JS

$(document).ready(function(){
  $('.btn').on('click',function(){
    var getParentID = $('.btn').parent().attr('id');
    $(getParentID).remove();
});
});

This is essentially all I was working with to try to get it to function. Any help is much appreciated!

• javascript
• jquery

Share Improve this question Follow asked May 29, 2017 at 15:34 MalyGMalyG 32122 gold badges66 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use $(this) instead of $('.btn') since you want to target the specific element

var getParentID = $(this).parent().attr('id'); Once the id is available use jquery id selector to target the element

$(document).ready(function() {
  $('.btn').on('click', function() {
    var getParentID = $(this).parent().attr('id');
    $("#" + getParentID).remove();
  });
});

#box {
  width: 200px;
  height: 200px;
  background: black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='some classes' id='box1'>
  <span class='btn btn-primary'>Close this div</span>
</div>
<div class='some classes' id='box2'>
  <span class='btn btn-primary'>Close this div</span>
</div>

Note: The answer is specific to your question.Alternatively the parent div can be removed even without getting it's id

What you want to do is to skip the jQuery and do it in pure javascript.

var parent = child.parentElement;
parent.parentElement.removeChild(parent);

本文标签： javascriptGet parent div id by clicking on a child elementStack Overflow