Jquery removes all the least selected Divs and the ones from the other menu

Asked

Viewed 198 times

0

This code removes all the least selected Ivs, but also the ones from the motherboard menu what I was trying to do was to make the bottom ones independent of the top ones. I’m sorry to show you the code like this but you can’t put it in the editor, because you need the data from the comic. The result of this code https://www.youtube.com/watch?v=wIkAsCj8oIk

<!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

2 answers

4


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

"Delete all buttons other than the one you 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>
<button class="item">1</button>
<button class="item">2</button>
<button class="item">3</button>
<button class="item">4</button>
<button class="item">5</button>

The function removeItems loop all buttons that are not clicked to remove all.

  • nice, I’ll test

  • how elegant! :)

  • I edited the code and the video now I have another problem, if I can help I am grateful

  • @please separate the questions into different topics. As this question has already been concluded open another with your new question.

2

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

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

I believe this is the way to leave 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>

Browser other questions tagged php javascript html jquery ajax

You are not signed in. Login or sign up in order to post.