Question: I have a series of clickable div elements and I want to fetch the contents of a text element within based on each div's unique id. 

```
<div class='square' id='sq12'><p class='text'><br/>"Text I want to fetch"</p></div>

```

I'm using jquery to detect when the square class is clicked, fetch the id associated with it, and then grap the text class contents. It works fine when the user clicks anywhere blank in the div, but if they click directly over the text, it can't read the parent id and throws the error

```
Cannot read property 'getElementsByClassName' of null

```

I'm using this to detect click:

```
 $('body').on('click', '.square', function(e) 
         {
    var fetchedText = document.getElementById(e.target.id).getElementsByClassName('text')[0].innerHTML;

    alert(fetchedText);             

        });

```

Is there a way to detect the parent div's id from the clicked text-class element or do I need an entirely different approach?

I suspect this is an easy one, but I'm blanking out.

Answer: 
The child element accepts [pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) of its own, and you can prevent them through CSS to allow the click to fall to the parent and trigger your desired behavior:

```
.square p {
    pointer-events: none;
}

```
> 
> Is there a way to detect the parent div's id from the clicked
>  text-class element
> 
> 
> 

Your selector is `.square` so there is no parent, and if you want to detect `id` you can use `$(this).attr('id')` and with `$(this).children('.text').html()` you can return children `html`.

```js
$('body').on('click', '.square', function(e) {
  var fetchedText = $(this).children('.text').html();
  var Id = $(this).attr('id');
  console.log(Id);
  console.log(fetchedText);
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='square' id='sq11'>
  <p class='text'><br/>"Text I want to fetch 1"</p>
</div>

<div class='square' id='sq12'>
  <p class='text'><br/>"Text I want to fetch 2"</p>
</div>

<div class='square' id='sq13'>
  <p class='text'><br/>"Text I want to fetch 3"</p>
</div>
```

But if you want to get parent `id` from children you can try `.parent()`:

```js
$('body').on('click', '.text', function(e) {
  // OR var fetchedText = $(this).html();
  var parentId = $(this).parent().attr('id');
  var fetchedText = $('#'+parentId).children('.text').html();
  console.log(fetchedText);
  console.log(parentId);
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='square' id='sq11'>
  <p class='text'><br/>"Text I want to fetch 1"</p>
</div>

<div class='square' id='sq12'>
  <p class='text'><br/>"Text I want to fetch 2"</p>
</div>

<div class='square' id='sq13'>
  <p class='text'><br/>"Text I want to fetch 3"</p>
</div>
```

`e.target.id` return an `id` which `e.target` return `<p class="text">` so there is no `id` to get.