Close parent div

Question

Hi,

I have a set of div's with some child elements.Inside parent div I have a hyperlink. If I click the hyperlink, then i want to close the parent div of the currently clicked link, not other div's.

Ex:

<div class="1"><a href="#" class="closeThis">close</a></div>
<div class="2"><a href="#" class="closeThis">close</a></div>
<div class="3"><a href="#" class="closeThis">close</a></div>
<div class="4"><a href="#" class="closeThis">close</a></div>

if I click the link inside the class="1" then i just want to hide the current parent of class="1" div, not other parent div.

Help me to fix . Thanks in advance.

Answer 1

Try this:

Your links:

<div class="1"><a href="#" class="closeThis" onclick="removeThis(this);">close</a></div>
<div class="2"><a href="#" class="closeThis" onclick="removeThis(this);">close</a></div>
<div class="3"><a href="#" class="closeThis" onclick="removeThis(this);">close</a></div>
<div class="4"><a href="#" class="closeThis" onclick="removeThis(this);">close</a></div>

<script>
  function removeThis(field)
  {
    $(field).parent().hide();
  }
</script>

Note: You could also use remove() instead of hide() as shown above. Thanks

Answer 2

Try:

$("div a.closeThis").click(function(){
  $(this).parent().hide();
});