CODEWITHSUNDEEP
javascriptjqueryhtml
Adam Pavlov
Adam Pavlov

Reputation: 307

On click element should hide from parent element

In a given task, I used "data-row" four times and in it there is a link have "Edit".

I want that when I click on "Edit", then this should hide with "data" class and display "get-input" only form current "data-row". In my query when I click on "Edit", it hide from all "data-row".

What is the logic for that?

HTML:

<div class="data-row">
    <span class="data-label">Email:</span>
    <span class="data"><a href="mailto:[email protected]">[email protected]</a>  </span>
    <div class="hidden get-input phone">
        <input type="phone" placeholder="Enter phone number" value="877-755-2787">
    </div>
    <a href="#" class="edit-contact orange f-right"> Edit</a>
</div>

CSS:

.hidden {
    display: none;
}

.data-row {margin-bottom:20px}

jQuery:

$(".edit-contact").click(function () {
  $(this).addClass("hidden");
  $(".data").addClass("hidden");
  $(".get-input").removeClass("hidden");
});

Check Here JSFiddle

Upvotes: 0

Views: 49

Answers (3)

mani
mani

Reputation: 21

You can use event.target to find the current clicked edit icon. below is js change for this.

$(".edit-contact").click(function(event){
  $(this).addClass("hidden");
  $(event.target.parentNode).find(".data").addClass("hidden");
  $(event.target.parentNode).find(".get-input").removeClass("hidden");
});

Change and check in JS fiddle

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

You have to use this reference to hide the elements related to the clicked element,

$(".edit-contact").click(function(){
  $(this).prev(".get-input").removeClass("hidden")
     .prev(".data").add(this).addClass("hidden");
});

.prev() will select the immediate previous sibling related to the clicked element.

DEMO

Upvotes: 1

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

Your selector selects all the elements with a class data. You'll need to specify which one exactly you want to add your class to. You can achieve this with: $(this).parent().children(".data").addClass("hidden");

Upvotes: 1

Related Questions