Jquery removes all the less selected divs and those from the other menu

Question

Jquery removes all the less selected divs and those from the other menu

Navigation

#1 by (4 votes)
#2 by (2 votes)

0

This code removes all the less selected divs, but also those from the motherboard menu what I was trying to do was make the below ones independent of the above ones. I'm sorry for showing the code like this but you can not put it in the editor because you need the data from the bd. The result of this code link

<!DOCTYPE html>
<html>
<head>
<title>Configurador</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/ResponsiveAccordianMenu.css" rel="stylesheet" type="text/css">
<link href="css/table.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="twd_container">
<h1 style="margin:150px auto 30px auto; text-align:center">Configurar</h1>
 <!--Processador-->
<div id="AL" class="expandContent">
    <h3 class="header">
        <div class="headerColumn1">Processador</div>
        <div class="headerColumn2 expand"><img src="img/plus.png" /></div>
        <div class="expandedContentClearFloat"></div>
    </h3>
    <div class="expandedContent">
        <div class="container">
            <ul id="orders">
            {% for item in processador %}
                <div class="product-removal">

                <li>
            <div class="row carousel-row" >

                <div class="col-xs-8 col-xs-offset-2 slide-row" id="container">

                    <div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">


                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img class="iconcomp" src="{{ item.img|e }}" alt="Image">
                            </div>

                        </div>
                    </div>
                    <div class="slide-content">
                        <h4>{{ item.marca|e }}</h4>
                        <p>
                            {{ item.descr|e }}
                        </p>
                    </div>
                    <div class="slide-price">
                            <h3> {{ item.preco_unit|e }}€</h3>
                    </div>

                    <div class="slide-cima" id="{{ item.id|e }}">
                     <!-- <span class="pull-right buttons" aria-label="Close">
                         <button class="btn2" id='remove' value='{{ item.id|e }}' onclick="rmv(this)"><i class="fa fa-fw close"></i></button>
                      </span>-->
                        <button type="button" class="close" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    </div>

                    <div class="slide-footer" id="{{ item.id|e }}">
                            <button class="pull-right remove-product">
                                <i class="fa fa-fw fa-shopping-cart"></i>
                            </button>
                    </div>

                </div>

            </div>
                </li>
                </div>

                {% endfor %}
            </ul>
        </div>
    </div>
</div>
<div class="clearfloat"></div>


<!--Motherboard-->
<div id="NH" class="expandContent">
    <h3 class="header">
        <div class="headerColumn1">Motherboard</div>
        <div class="headerColumn2 expand"><img src="img/plus.png" /></div>
        <div class="expandedContentClearFloat"></div>
    </h3>
    <div class="expandedContent">
        <div class="container">
            {% for item in motherboard %}
            <div class="row carousel-row" >

                <div class="col-xs-8 col-xs-offset-2 slide-row" id="container">

                    <div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">


                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img class="iconcomp" src="{{ item.img|e }}" alt="Image">
                            </div>

                        </div>
                    </div>
                    <div class="slide-content">
                        <h4>{{ item.marca|e }}</h4>
                        <p>
                            {{ item.descr|e }}
                        </p>
                    </div>
                    <div class="slide-price">
                            <h3> {{ item.preco_unit|e }}€</h3>
                    </div>

                    <div class="slide-cima" id="{{ item.id|e }}">
                     <!-- <span class="pull-right buttons" aria-label="Close">
                         <button class="btn2" id='remove' value='{{ item.id|e }}' onclick="rmv(this)"><i class="fa fa-fw close"></i></button>
                      </span>-->
                        <button type="button" class="close" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    </div>

                    <div class="slide-footer" id="{{ item.id|e }}">
                            <button class="pull-right remove-product">
                                <i class="fa fa-fw fa-shopping-cart"></i>
                            </button>
                    </div>
                </div>

            </div>
            {% endfor %}

        </div>
    </div>
</div>
<div class="clearfloat"></div>
</div>

   <!-- scripts-->
   <script type="text/javascript">
   $('.close').hide();
   $('.remove-product').click( function() {
    var allExceptClicked = $('.remove-product').not(this);
    removeItem(allExceptClicked);
   });
   $('.close').click( function() {
    var allExceptClicked = $('.close').not(this);
    addItem(allExceptClicked);
    });
    function addItem(addButton)
    {
    $('.remove-product').show();
    $('.close').hide();
    var productRow = $(addButton).parent().parent();
    productRow.show();
    }
    function removeItem(removeButton)
   {
    $('.remove-product').hide();
    $('.close').show();
    var productRow = $(removeButton).parent().parent();
    productRow.hide();
  }
  </script>
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="js/ResponsiveAccordianMenu.js"></script>
</body>
</html>

php javascript html jquery ajax

asked by anonymous 20.02.2018 / 16:32

2 answers

2

If you want to remove, use $('div').not($(this)).remove(); as in the example below, if you only want to hide, use $('div').not($(this)).hide();

You remove all elements and deny the selected using not($(this)) .

I think this is the way to make the code as "lean" as possible.

$('div').click(function(){
  $('div').not($(this)).remove();
})

div{
width:100px;
height:50px;
background-color:red;
margin: 5px;
}

<div> DIV1 </div>
<div> DIV2 </div>
<div> DIV3 </div>
<div> DIV4 </div>
<div> DIV5 </div>



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

20.02.2018 / 16:50

Visitor Counter What is the difference between map () and lenght ()?

score 4 · Accepted Answer

You can use the not() function of jQuery to deny a condition, for example:

"Delete all buttons other than the one clicked"

Example:

$('.item').on('click', function () {
    var allExceptClicked = $('.item').not(this);
    removeItems(allExceptClicked);
});

function removeItems(buttons) {
    buttons.each(function(index, element) {
        $(element).remove();
    });
}

.item {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonclass="item">1</button>
<button class="item">2</button>
<button class="item">3</button>
<button class="item">4</button>
<button class="item">5</button>

The removeItems function loops on all buttons other than the clicked remove all.