Display a close button for every individual item and use JavaScript to conceal the current item

Question

Display a close button for every individual item and use JavaScript to conceal the current item

I have a list that contains input fields along with delete link elements. I want to display the delete link element when the user hovers over the respective input field. Additionally, clicking on the close button (X) should hide the entire list item (li) from the list.

Currently, I am using vanilla JavaScript to achieve this functionality, but I have encountered an issue. The code I have written only shows the first close button, regardless of which field I hover over.

Custom HTML

<ul class="social-links-list">
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link" onclick=''>X</span>
  </li>
    <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
    <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
</ul>

Styling with CSS

ul {
  list-style: none;
}

input[type='text'] {
  height: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.delete-link {
  color: red;
  opacity: 0;
  cursor: pointer;
}

JavaScript Approach

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
    el.addEventListener('mouseover', function(){
        closeBtn.style.opacity = 1;
    });
      el.addEventListener('mouseout', function(){
        closeBtn.style.opacity = 0;
    });
    var closeBtn = document.querySelector('.social-link .delete-link');

    for (i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener("click", function() {
        this.parentElement.style.display = 'none';
      });
    }
});

For a live example, you can check this JSFiddle.

javascript html css events dom

Answer 1

Answer №1

Almost there.

To make it easier to manage, you can store your .delete-link element as a variable (closeBtn) and then add a click event listener to it:

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
  var closeBtn = el.querySelector('.delete-link');
  
  el.addEventListener('mouseover', function() {    
    closeBtn.style.opacity = 1;
  });

  el.addEventListener('mouseout', function() {
    closeBtn.style.opacity = 0;
  });
  
  closeBtn.addEventListener('click', function() {
    closeBtn.parentElement.style.display = 'none';
  });
});

ul {
  list-style: none;
}

input[type='text'] {
  height: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.delete-link {
  color: red;
  opacity: 0;
  cursor: pointer;
}

<ul class="social-links-list">
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-1">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-2">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-3">
    <span class="delete-link">X</span>
  </li>
</ul>

I have updated the placeholders of the input fields to indicate the correctly modified elements.

Answer 2

Almost there.

To make it easier to manage, you can store your .delete-link element as a variable (closeBtn) and then add a click event listener to it:

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
  var closeBtn = el.querySelector('.delete-link');
  
  el.addEventListener('mouseover', function() {    
    closeBtn.style.opacity = 1;
  });

  el.addEventListener('mouseout', function() {
    closeBtn.style.opacity = 0;
  });
  
  closeBtn.addEventListener('click', function() {
    closeBtn.parentElement.style.display = 'none';
  });
});

ul {
  list-style: none;
}

input[type='text'] {
  height: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.delete-link {
  color: red;
  opacity: 0;
  cursor: pointer;
}

<ul class="social-links-list">
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-1">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-2">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id-3">
    <span class="delete-link">X</span>
  </li>
</ul>

I have updated the placeholders of the input fields to indicate the correctly modified elements.

Answer 3

Answer №2

The issue lies with your closeBtn selector. The current implementation does not target the child element within your parent element. Instead, it selects the first matching item, not all items as intended.

To resolve this, create a separate variable specifically for the span child.

var closeBtn = el.querySelectorAll(".delete-link")[0];

This will explicitly target the .delete-link span within the current element. Once this is done, the for-loop can be removed as it is redundant.

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
    var closeBtn = el.querySelectorAll(".delete-link")[0];

    el.addEventListener('mouseover', function(){
        closeBtn.style.opacity = 1;
    });
    el.addEventListener('mouseout', function(){
        closeBtn.style.opacity = 0;
    });

    closeBtn.addEventListener("click", function() {
       this.parentElement.style.display = 'none';
    })
});

For a working example, refer to this Fiddle: http://jsfiddle.net/0u7jxtfk/2/

Answer 4

The issue lies with your closeBtn selector. The current implementation does not target the child element within your parent element. Instead, it selects the first matching item, not all items as intended.

To resolve this, create a separate variable specifically for the span child.

var closeBtn = el.querySelectorAll(".delete-link")[0];

This will explicitly target the .delete-link span within the current element. Once this is done, the for-loop can be removed as it is redundant.

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
    var closeBtn = el.querySelectorAll(".delete-link")[0];

    el.addEventListener('mouseover', function(){
        closeBtn.style.opacity = 1;
    });
    el.addEventListener('mouseout', function(){
        closeBtn.style.opacity = 0;
    });

    closeBtn.addEventListener("click", function() {
       this.parentElement.style.display = 'none';
    })
});

For a working example, refer to this Fiddle: http://jsfiddle.net/0u7jxtfk/2/

Answer 5

Answer №3

To streamline the code, you can make use of CSS to easily hide or display the delete link. Furthermore, you can directly access the delete link from the social link node.

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
  var closeBtn = el.querySelector('.delete-link');
  closeBtn.addEventListener("click", function() {
    el.style.display = 'none';
  });
});

ul {
  list-style: none;
}

input[type='text'] {
  height: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.delete-link {
  color: red;
  opacity: 0;
  cursor: pointer;
}

.social-link .delete-link {
  opacity: 0;
}

.social-link:hover .delete-link {
  opacity: 1;
}

<ul class="social-links-list">
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link" onclick=''>X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
</ul>

Answer 6

To streamline the code, you can make use of CSS to easily hide or display the delete link. Furthermore, you can directly access the delete link from the social link node.

var socialField = document.querySelectorAll('.social-link');

socialField.forEach(function(el) {
  var closeBtn = el.querySelector('.delete-link');
  closeBtn.addEventListener("click", function() {
    el.style.display = 'none';
  });
});

ul {
  list-style: none;
}

input[type='text'] {
  height: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.delete-link {
  color: red;
  opacity: 0;
  cursor: pointer;
}

.social-link .delete-link {
  opacity: 0;
}

.social-link:hover .delete-link {
  opacity: 1;
}

<ul class="social-links-list">
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link" onclick=''>X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
  <li class="social-link">
    <input type="text" name="" id="" placeholder="http://facebook.com/id">
    <span class="delete-link">X</span>
  </li>
</ul>

Display a close button for every individual item and use JavaScript to conceal the current item

Answer №1

Almost there.

Answer №2

Answer №3

Similar questions

Enhance Your List with Icon Decorations

React transmits an incorrect argument through the function

How can audio be efficiently streamed to the browser in small chunks using JavaScript?

How big is the array size in the WebAudio API data?

Automating the process of posting a file to a form with javascript

Identify the occurrence of isolated "<" or ">" characters in a string that includes HTML elements

Apply a specific class to a list once scrolling beyond a certain offset of a group of division elements

Display the name of the file on the screen

The operation to set a nickname in Discord.js was unsuccessful due to insufficient permissions

Having trouble establishing a connection with Mongo.Client on localhost 27017 for MongoDB

Only display entries with no content

An error occurred: [object Object] does not contain the function 'bootstrapDatepicker'

Two challenges I encountered with my CSS dropdown menu bar

jQuery Mobile offers a feature that allows users to create collapsible elements

Is the float floating within another float?

Leveraging React's useEffect hook to asynchronously fetch and load data

Is there a way for me to automatically generate and send a random collection each time a GET request is made on my Node.js

Trouble with formatting credit card numbers in Vue.js

Developing a dynamic modal using Angular and embedding Google Maps within an iframe

Personalized HTML characteristics