单击时隐藏div-多个框

Question

I have a bit long info submission form. I have an option that someone click "add another", there is a notification box display with text like "Success!" like that with close button. Please check this image.

Therefore I have three "add another" buttons and three success alerts. When someone click close, that alert message needs to be disappear.

The problem

I used javascript for that success box. It does these things.

Click "Add another" button, appears success box.
Click close button on success box, box disappears.

Here is my code.

 document.querySelector(".add-box").addEventListener("click", function() { document.querySelector(".add-box-wrap").style.display = "inline-block"; }); document.querySelector(".add-box1").addEventListener("click", function() { document.querySelector(".add-box-wrap1").style.display = "inline-block"; }); document.querySelector(".add-box2").addEventListener("click", function() { document.querySelector(".add-box-wrap2").style.display = "inline-block"; }); $(".claim-btn-close").click(function() { $(".add-box-wrap").hide(); }); $(".claim-btn-close1").click(function() { $(".add-box-wrap1").hide(); }); $(".claim-btn-close2").click(function() { $(".add-box-wrap2").hide(); }); <!-- This goes end of html page --> function hide(target) { document.getElementsByClassName(target).style.display = 'none'; }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--Success form--> <div class="add-box-wrap"> <div class="claim-btn-close" onclick="hide('.claim-btn-close')"> <i class="fa fa-times" aria-hidden="true"></i> </div> <a href="" class="btn btn-primary claim-btn">Success!</a> </div> <!--Add another button --> <div class="col-lg-10 col-md-10 col-sm-12 no-padding"> <a class="add-box">Add another<i class="fa fa-plus"></i></a> </div> 

See.. there is a major problem with code repeating. (I didn't repeat html codes, just post here one example) I would like to know the best practice to achieve things like this.

Answer 1

You can use DOM relationship to target the desired element. Bind event handlers using a common class then use .closest() to traverse up desired element.

$(".claim-btn-close").click(function(){
    $(this).closest(".add-box-wrap").hide();
});

If element are dynamically generate use Event Delegation approach.

$(staticParentElemet).on('click',".claim-btn-close",function(){
    $(this).closest(".add-box-wrap").hide();
});

Answer 2

For displaying the notification box without repeating the code, one of the way is you could make use of data attributes. Change the data attribute for all the buttons and let the class .add-box be the same. like so:

<div class="add-box-wrap1" style="display: none;">
  <div class="claim-btn-close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn btn-primary claim-btn">Success!</a>
</div>
<div class="add-box-wrap2" style="display: none;">
  <div class="claim-btn-close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn btn-primary claim-btn">Success!</a>
</div>

<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
  <a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a>
</div>

<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
  <a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>

And change your Jquery to just one function .

$(".add-box").click(function() {
  $(".add-box-wrap" + $(this).data('target')).show(); //.add-box-wrap1 or .add-box-wrap2 
});

Explanation of the above line: It just means we are getting the value of the "clicked" button's data-target value(which is 1 or 2) AND appending that value to the "add-box-wrap"(which will be add-box-wrap1 or add-box-wrap2 ) to search for that element to display it using .show() .

Using show() or .css jquery functions is upto you. But I suggest not to mix both vanilla JS and JQuery codes(like in your question).

Closing

You can simply use closest or parent , like so:

$(".claim-btn-close").click(function(){
    $(this).parent().hide();
});

 $(".add-box").click(function() { $(".add-box-wrap" + $(this).data('target')).show(); }); $(".claim-btn-close").click(function(){ $(this).parent().hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="add-box-wrap1" style="display: none;"> <div class="claim-btn-close"> <i class="fa fa-times" aria-hidden="true"></i> </div> <a href="" class="btn btn-primary claim-btn">Success!</a> </div> <div class="add-box-wrap2" style="display: none;"> <div class="claim-btn-close"> <i class="fa fa-times" aria-hidden="true"></i> </div> <a href="" class="btn btn-primary claim-btn">Success!</a> </div> <!--Add another button --> <div class="col-lg-10 col-md-10 col-sm-12 no-padding"> <a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a> </div> <!--Add another button --> <div class="col-lg-10 col-md-10 col-sm-12 no-padding"> <a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a> </div> 

Update on another question(3 column):

Using bootstrap, you can wrap the add-box-wrap divs within a .row and give each of it a class like col-*-4 ( class="col-xs-4 col-md-4 col-lg-4" ) assuming you have 3 success buttons(12/3 = 4). So the first part of your html would become

<div class="row">
  <div class="add-box-wrap1 col-md-4 col-lg-4" style="display: none;">
    <div class="claim-btn-close">
      <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <a href="" class="btn btn-primary claim-btn">Success!</a>
  </div>
  <div class="add-box-wrap2 col-md-4 col-lg-4" style="display: none;">
    <div class="claim-btn-close">
      <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <a href="" class="btn btn-primary claim-btn">Success!</a>
  </div>
  <div class="add-box-wrap3 col-md-4 col-lg-4" style="display: none;">
    <div class="claim-btn-close">
      <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <a href="" class="btn btn-primary claim-btn">Success!</a>
  </div>
</div>