3 Replies - 347 Views - Last Post: 16 April 2018 - 12:51 AM

#1 davedodea   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 23-March 18

Show / Hide a div within a list item

Posted 14 April 2018 - 05:28 AM

I'd like to show/hide a div containing a word "delete" within an list item, depending on which the li the mouse is over.

I am using the following jQuery:
$('#getAllTasksResult').mouseover(function () {
            $(this).find('#deleteBtn').show();
        })
        .mouseleave(function () {
            $(this).find('#deleteBtn').hide();
        });



There are multiple list items that are generated from an ajax response:

var resultElement = document.getElementById('getAllTasksResult');
    resultElement.innerHTML = '';

    axios({
            method: 'GET',
            auth: {
                username: APIKey,
                password: ':xxx'
            },
            url: 'url',
        })
        .then(function (response) {
            $(response.data['todo-items']).each(function () {
                var taskID = this.id;
                var taskTitle = this.content;
                $(resultElement).append(
                    '<div class="taskDiv">'+ 
                    '<li style="list-style-type: none">' +
                    '<p>' + taskTitle + '</p >' +
                    '<p>' + taskID + '</p>' +
                    '<div id="deleteBtn" style="display: none">' + 
                    '<p><a href="#">Delete</a></p>' + 
                    '</div>' +
                    '</li>' + 
                    '<hr>' +
                    '</div>');
                //console.log('Task ID is: ' + taskID);
            });
        })
        .catch(function (error) {
            resultElement.innerHTML = generateErrorHTMLOutput(error);
        });



With the above code, the delete is only displayed for the first element, no matter which li the mouse is over - this is expected as I am targeting #getAllTasksResult.

I'd like to know how to target each li as it is mouseover, I know I'd need some way of assigning a different id to each li within #getAllTasksResult>#TaskDiv .

Any help/guidance would be appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Show / Hide a div within a list item

#2 davedodea   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 23-March 18

Re: Show / Hide a div within a list item

Posted 14 April 2018 - 05:44 AM

Link is a screenshot to illustrate more clearly:

https://ibb.co/mWy6K7
Was This Post Helpful? 0
  • +
  • -

#3 Pogaca   User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 137
  • Joined: 24-August 13

Re: Show / Hide a div within a list item

Posted 16 April 2018 - 12:40 AM

Using DevExtreme may help you to solve this problem very easy. Check out this example: https://js.devexpres...t/jQuery/Light/

Also take in mind that you can find there lot complicated examples.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,084
  • Joined: 12-December 12

Re: Show / Hide a div within a list item

Posted 16 April 2018 - 12:51 AM

You should use on() and event delegation to dynamically attach events to existing and newly inserted elements.

Rather than giving each new li an id you can use a selector for all of the li elements within a parent container, such as ".taskDiv li". However, note that li's should have an ol or ul as direct parent, not a div, and this ol/ul should only have li elements as direct children (not a hr).

If you still want to give each newly inserted li a unique id you could use a counter variable appending numbers 1,2,3 to "someid" to produce a unique sequence.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1