Question 35659 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

remove selected item using jquery

How I get active class only on click div not on all div??

html code

<div class="col-12">
    <div class="place" id="test-1"></div>
</div>
<div class="col-12">
    <div class="place" id="test-2"></div>
</div>
<div class="col-12">
    <div class="place" id="test-3"></div>
</div>

Jquery code

// adding this div for each place class 

$('.place').wrap('<div.class="main__place"></div>')

//cut icon for hide

$('<i class="fa fa-x removeBtn”></i>').insertBefore(".place")

$(".removeBtn").on("click",function(){
   $(".main__place").addClass("active")
})`

https://jsfiddle.net/xf9gpk2t/2/
Refer above js fiddle
whenever I click on full screen icon all div get’s active class

Tags:

2

Answers


  1. 0

    In the following snippet I remove the clicked element by "looking up" to the closest .col-12 element:

    // adding this div for each place class 
$('.place').wrap('<div.class="main__place"></div>').prepend('<i class="fa fa-x removeBtn"></i>')

$("body").on("click",".removeBtn",function(){
   $(this).closest(".col-12").remove()
})
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
    <div class="place" id="test-1">1</div>
</div>
<div class="col-12">
    <div class="place" id="test-2">2</div>
</div>
<div class="col-12">
    <div class="place" id="test-3">3</div>
</div>

    If you just want to toggle a class then you can just do that too:

    // adding this div for each place class 
$('.place').wrap('<div.class="main__place"></div>').prepend('<i class="fa fa-x removeBtn"></i>')

$("body").on("click",".removeBtn",function(){
   let curr=this.closest(".col-12");
   $(".col-12").each(function(){$(this).toggleClass("active",this==curr)})
})
    .active {background-color:red}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
    <div class="place" id="test-1">1</div>
</div>
<div class="col-12">
    <div class="place" id="test-2">2</div>
</div>
<div class="col-12">
    <div class="place" id="test-3">3</div>
</div>
    Login or Signup to reply.
  2. 0

    Could you try this :

    I have added an x to the remove button, you can remove it since you will have no problem with the fa icons.

    $('.place').wrap('<div class="main__place"></div>')

//cut icon for hide

$('<i class="fa fa-x removeBtn">x</i>').insertBefore(".place")

$(".removeBtn").on("click",function(){
   $('.main__place').removeClass('active');
   $(this).parent().addClass("active")
})
    .active  {background-color:#ccc}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
    <div class="place" id="test-1">test-1</div>
</div>
<div class="col-12">
    <div class="place" id="test-2">test-2</div>
</div>
<div class="col-12">
    <div class="place" id="test-3">test-3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search