CODEWITHSUNDEEP
javascriptjquery
Bruce
Bruce

Reputation: 1071

Jquery .remove event only on parent not child

<script>
$(".alert").click(function(){
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
});
</script>

<div class="alert alert-error">                
    <h4>title</h4>
    <textarea class="pull-right">text...</textarea>
</div>

So the above code works perfectly except that I need to make it so that a user can select the text inside the textarea. At this moment logically when they click the textarea, as its contained by .alert, it instantly gets removed with the div.

I can't remove the textarea from the div as I need it both contained by the div, and removed when other parts of the div are clicked.

So how can I specifically exclude the textarea from the click event of its containing div while still allowing the click event from the containing div to remove the textarea.

Upvotes: 1

Views: 60

Answers (2)

Gatsbill
Gatsbill

Reputation: 1790

you can also use the not selector to do this :

<script>
$(".alert *:not(textarea)").click(function(){
    $(this).fadeOut(300, function(){            
        $(this).parent().remove();            
    });
});
</script>

<div class="alert alert-error">                
    <h4>title</h4>
    <textarea class="pull-right">text...</textarea>
</div>

see this fiddle: https://jsfiddle.net/zLq6dztu/

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074495

You can do this by preventing the click event from propagating (bubbling) from the textarea to the div:

$(".alert textarea").on("click", function(e) {
    e.stopPropgation();
});

Example:

$(".alert").click(function(){
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
});
$(".alert textarea").on("click", function(e) {
  e.stopPropagation();
});
<div class="alert alert-error">                
    <h4>title</h4>
    <textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Alternately, in your existing handler, check to see if the event passed through the textarea:

$(".alert").click(function(e){
  if (!$(e.target).closest("textarea").length) {
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
  }
});

Example:

$(".alert").click(function(e){
  if (!$(e.target).closest("textarea").length) {
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
  }
});
<div class="alert alert-error">                
    <h4>title</h4>
    <textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Note that that second one relies on the fact that your .alert element can never be inside another textarea, because of the nature of the elements. It won't work in the general case. This would, but it's a pain:

$(".alert").click(function(e){
  var $t = $(e.target);
  if (!$t.is("textarea") && !$t.parentsUntil(this, "textarea").length) {
    $(this).fadeOut(300, function(){            
        $(this).remove();            
    });
  }
});

Upvotes: 3

Related Questions