Select element except for specific child

Question

My problem is:

I select a div with many children and would like to know how to not select a certain element which is actually a child of that previously selected element.

I already tried the :not(selectedElement) selector and the .not(selectedElement) selector or api (dont know how it's called). Anyway, I also found someone who asked a similar question which didn't help so I guess the only way to find out what is wrong is to ask here if you have any approaches (I know stackoverflow is not meant to work like that but I seriously sat there many times and couldnt solve it):

HTML:

<div class="tablee" style="cursor:/*pointer*/;">
    <table>
        <tbody>
            <tr>
                <td>
                    <a href="something.php">
                        <img src="1.jpg">
                    </a>
                </td>
                <td class="postcontent">
                    <p class="postusername">
                        <a class="poster" href="something.php">momo</a>
                        <br>
                        some other text
                    </p>
                </td>
                <td>
                    <imgsrc="1.jpg">
                </td>
            </tr>
        </tbody>
    </table>
</div>

jQuery:

//non-dynamyic
$(".tablee").not($(this).find('a')).click(function() {
    $(this).next().slideToggle();
});

So if tablee is clicked and not a link within it (within tablee element) the next element that comes after tablee shall toggle.

Answer 1

First of all, your selector is not selecting all the children and attaching the click event to then. The event is only on the actual selector and on click of a child the event is propagating up to the parent.

You have a click event on .tablee which you do not want to trigger on the click of any a within. In this case have a separate event on a with stopPropagation:-

$(".tablee").click(function() {
    $(this).next().slideToggle();
});

$(".tablee a").click(function(e) {
    e.stopPropagation();
});

This will then stop any click on a bubbling up to .tablee.

Answer 2

From your comment

I´m trying to toggle the next element (the element that comes directly after tablee) when the tablee element is clicked unless those links were not clicked.

Here is a way to ignore the anchors,

$(".tablee").click(function(e) {
    if(!$(e.target).is("a")){
         $(this).next().slideToggle();
    }
});

The above is("a") checks the current clicked target.

Why your code didn't work

$(".tablee").not($(this).find('a'))

In the above selector this refers to the window object and not the .tablee element. Also not() on the parent div would filter the elements with class .tablee and not child elements on the div.