CODEWITHSUNDEEP
javascript
Mac
Mac

Reputation: 108

Remove class from parent element javascript

I have a container that opens via an onclick function. I then have a cross within the container that should close the parent element however I receive a

TypeError: undefined is not an object (evaluating 'parent.id')

Code is here

<div class="post" onclick="postClick(el)">
...
...
</div>

JavaScript

             function postClick(el) {
                     document.getElementById(el.id).classList.add("read");
             }
             function postClose(event) {
                 var parent = this.parentNode;
                 console.log(parent.id);
                 parent.id.classList.remove("read");         
             }

Upvotes: 1

Views: 8131

Answers (4)

THENETSPIDER
THENETSPIDER

Reputation: 347

Jut use this and you are done : 😊

element.parentNode.classList.remove("class-name");

Upvotes: 0

nikhil swami
nikhil swami

Reputation: 2684

if the project is complex and needs interactivity more than often then you use jquery library for the interactivity.

//to remove class
$( "p" ).removeClass( "myClass yourClass" )


$("#div123").toggle(); //if you want to temp hide elements

as your code suggests the 'read' items must be disabled, you can toggle them once an event handler is wrapped over the toggle method. you can pass this or $(this) in case you want to do stuff with the owner of the function call.

well i agree some adept devs didnt like this answer, it will be surely of some help to some beginner dev in future who is looking for an alternative option to hide elements or remove classes

Upvotes: -3

NoNickAvailable
NoNickAvailable

Reputation: 398

One way of doing this is using pure Javascript and bind the event listener like this 

document.querySelector('#toggle').addEventListener('click', function (e) {
  console.log(this.parentNode.classList.remove('read'))
});
div {
  padding: 20px 50px;
}

div.read {
  background-color: red;
}
<div class="read">
  <button id="toggle">Remove Parent Class</button>
</div>

Upvotes: 0

Carolyn Hodges
Carolyn Hodges

Reputation: 181

Use event.target to get the reference to the HTML element. And you have an extra .id in the parent.id.classList expression.

function postClick(event) {
  const el = event.target;
  document.getElementById(el.id).classList.add("read");
}

function postClose(event) {
  const el = event.target;
  const parent = el.parentNode;
  console.log(parent.id);
  parent.classList.remove("read");         
 }
<div class="post" onclick="postClick(event)">
...
...
</div>

Upvotes: 4

Related Questions