html – Delete one item based on its position in a div (jQuery)-ThrowExceptions

Exception or error:

So what I want to do is delete the (example) third triangle (with index 4) when I hover in the div with the text “four”.

My jQuery code (the first part just makes the octagon) the second part I wanted to get both of the indexes but than don’t know where to go from there.

$(document).ready(function() {
  var triangles = $('.triangle');
  let amountOfTriangles = triangles.length;
  for (var i = 0; i < amountOfTriangles; i++) {
    let singleTriangle = triangles[i];
    var rotdeg = 45 * i;
    $(singleTriangle).css({
      "transform": "rotate(" + rotdeg + "deg)"
    });
  }

  var $elems = $('.item');
  var $tri = $('.triangle');
  $elems.hover(function(e) {
    var indexOfElem = $elems.index(this);
    var indexOfTri = $tri.index(this);
    console.log("You hover an element with an index of: " + indexOfElem);
  });
});
.container {
  float: right;
  width: 80%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle {
  border-top: 120px solid #0003;
  border-left: 50px solid #0000;
  border-right: 50px solid #0000;
  border-bottom: 120px solid #0000;
  width: 0px;
  height: 0px;
  position: absolute;
}

.list {
  top: 0px;
  left: 0px;
}

.item {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 20px;
  background: #0003;
  width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>
<div class="list">
  <div class="item">Zero</div>
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
  <div class="item">Six</div>
  <div class="item">Seven</div>
</div>

This is the JSfiddle link that for some reason does not display the console.log

EDIT: The question i asked wasn’t well enough explained so i am making this edit. I want to delete the triangle only for the duration of the hover.

How to solve:

Updated answer

OP has clarified that he only wants the triangle to be hidden away when items are hovered on, so the solution is a lot more trivial than the previous iteration. What you need is simply to use .eq(indexOfElem) to toggle a class:

$elems.hover(function(e) {
    var indexOfElem = $elems.index(this);
    $triangles.eq(indexOfElem).addClass('hidden');
}, function(e) {
    var indexOfElem = $elems.index(this);
    $triangles.eq(indexOfElem).removeClass('hidden');
});

And in your CSS, the .hidden class can simply be:

.hidden { display: none }

See example:

$(document).ready(function() {
  var $triangles = $('.triangle');
  $triangles.each(function(i) {
    $(this).css({
      transform: 'rotate(' + (45 * i) + 'deg)'
    });
  });

  var $elems = $('.item');
  $elems.hover(function(e) {
    var indexOfElem = $elems.index(this);
    $triangles.eq(indexOfElem).addClass('hidden');
  }, function(e) {
    var indexOfElem = $elems.index(this);
    $triangles.eq(indexOfElem).removeClass('hidden');
  });
});
.container {
  width: 80%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  position: absolute;
}

.triangle {
  border-top: 120px solid #0003;
  border-left: 50px solid #0000;
  border-right: 50px solid #0000;
  border-bottom: 120px solid #0000;
  width: 0px;
  height: 0px;
  position: absolute;
}

.list {
  top: 0px;
  left: 0px;
  position: relative;
}

.item {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 20px;
  background: #0003;
  width: 50px;
}

.triangle.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>
<div class="list">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
  <div class="item">Six</div>
  <div class="item">Seven</div>
  <div class="item">Eight</div>
</div>

Previous answer

What I would suggest is that instead of removing it based on the index of the element in the collection, you use .data() to store the index of each triangle instead. This is so that when a triangle is removed (which causes the .index() to change, since the length of the collection changes), the actual one-to-one matching between the items and the triangles still stays the same.

When you are applying the CSS transformation to your triangles, you can use .data('index', i) to store the index of the triangle. Even better: you can use jQuery’s .each() to loop through your collection of triangles instead of relying on a for loop:

var $triangles = $('.triangle');
$triangles.each(function(i) {
    $(this).css({
        transform: 'rotate(' + (45 * i) + 'deg)'
    }).data('index', i);
});

Then, in the hover function, you can simply filter through the triangles collection and remove the corresponding one:

$elems.hover(function(e) {
    var indexOfElem = $elems.index(this);
    triangles.filter(function() {
        return $(this).data('index') === indexOfElem;
    }).remove();
});

Also, the reason why your .hover() function does not work in your fiddle is because your items are being overlaid by the triangles: assigning it position: relative; will fix the problem.

See proof-of-concept here:

$(document).ready(function() {
  var $triangles = $('.triangle');
  $triangles.each(function(i) {
    $(this).css({
      transform: 'rotate(' + (45 * i) + 'deg)'
    }).data('index', i);
  });

  var $elems = $('.item');
  $elems.hover(function(e) {
    var indexOfElem = $elems.index(this);
    $triangles.filter(function() {
      return $(this).data('index') === indexOfElem;
    }).remove();
  });
});
.container {
  width: 80%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  position: absolute;
}

.triangle {
  border-top: 120px solid #0003;
  border-left: 50px solid #0000;
  border-right: 50px solid #0000;
  border-bottom: 120px solid #0000;
  width: 0px;
  height: 0px;
  position: absolute;
}

.list {
  top: 0px;
  left: 0px;
  position: relative;
}

.item {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 20px;
  background: #0003;
  width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>
<div class="list">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
  <div class="item">Six</div>
  <div class="item">Seven</div>
  <div class="item">Eight</div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *