Delete one item based on its position in a div (jQuery)

Question

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.

See [How do I remove a particular element from an array in JavaScript?](https://stackoverflow.com/questions/5767325/how-do-i-remove-a-particular-element-from-an-array-in-javascript) if you're just wanting to remove it from the array. Are you also wanting to remove it from the DOM? — C. Lewis, Feb 11 '20 at 07:47
@Akhil Aravind yes i do. I want it to become transparent with a .css() command but the problem is i don't know how to associate the item div with the correct triangle — Timmy, Feb 11 '20 at 07:53
https://api.jquery.com/remove/ (you can dynamically construct a css selector using `nth-child(...)`) — ne1410s, Feb 11 '20 at 07:53
@Christian i want to give it a css property to make it transparent so it keeps its position to later on remove the css propery and make it visible again. — Timmy, Feb 11 '20 at 07:54
@ne1410s i know but the problem is i cant associate the correct item div with its corresponding (by index) triangle div — Timmy, Feb 11 '20 at 07:58

Terry · Accepted Answer · 2020-02-11T08:19:35.320

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>

(this next part is fully my fault because i didn't explain my problem well enough). I was hoping the triangles would only disappear for the duration of the hover not until page refresh. — Timmy, Feb 11 '20 at 08:11
@Epik Pro-tip: it's always helpful to clarify upfront in the question itself. — Terry, Feb 11 '20 at 08:15
yes this was completely my bad and i think i can get it working the way i want to by using mouse enter and mouse leave functions with your code (if it works i am going to mark it as the correct answer hoping people will look in the comments) EDIT: it does work =D — Timmy, Feb 11 '20 at 08:17
@Epik Updated answer for the scenario where you don't want to remove the elements but simply to hide them. — Terry, Feb 11 '20 at 08:19

Delete one item based on its position in a div (jQuery)

1 Answers1

Updated answer

Previous answer