Hide dynamically created HTML element with JQuery

Question

I am creating a table row with a "spinner" to show actions when a button is pressed.

I append the row id to the spinner's id to be able to target it specifically.

For example row 21: #spinnerAction-21

While iterating through the data set, I add the name to array, so I can hide all of them after the html is inserted into the page.

Though I can't get my spinners to hide.I tried using inline CSS visibility to hidden but I couldn't un-hide it when I was done.

Any help on hiding my spinners? Is there a better way to do this?

var spinnerArray = $.makeArray();

for (var i = 0; i < data.length; i++) {
    html += '<tr>';
    html += '<td>';

    //other html output

    html += '<i class="fa fa-spinner fa-spin" id="spinnerAction-' + data[i].entry_id + '" style="font-size:24px;color:dodgerblue;"></i>';

    html += '</td>';//end button comlumn
    html += '</tr>';//end row

//Add a reference to the spinner for that row to hide.
    spinnerArray.push("#spinnerAction-" + data[i].entry_id);

}//end for

// insert the html rows
$('#display_info').append(html);

//hide the spinner in each row
$.each(spinnerArray, function (index, val) {
$(val).hide();
});

I'd strongly advise against using incrementally generated id attributes like this. It leads to needlessly complicated code which is difficult to read and maintain. Instead use common class names and select related elements by DOM traversal. I would give you a more concrete example of how to do this, but the structure of your page is unclear given the JS alone. — Rory McCrossan
– Rory McCrossan, Commented May 22, 2018 at 15:00
that's because val isn't the object it's the value of the spinner, it's not the element. You have to grab the spinner and use .hide() — Train
– Train, Commented May 22, 2018 at 15:02
@OrthoHomeDefense spinnerArray is a list of element IDs (with a preceding #). — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented May 22, 2018 at 15:03
jsfiddle.net/gqxt7u0v You logic appears to be working as is. — Taplar
– Taplar, Commented May 22, 2018 at 15:22

user-44651 · Accepted Answer · 2018-05-22 15:07:12Z

1

For anyone else running across this post, I ended up replacing

 spinnerArray.push("#spinnerAction-" + data[i].entry_id);

with

spinnerArray.push("spinnerAction-" + data[i].entry_id);

Removing the #

Then adding the # back in the

$.each(spinnerArray, function (index, val) {
                $('#' + val).hide();
            });

answered May 22, 2018 at 15:07

user-44651

4,1646 gold badges50 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user-44651 Over a year ago

@OrthoHomeDefense gave me the idea when he said it was the id with the #, removing that from the name added to the array allowed the hide() line to be evaluated properly.

Collectives™ on Stack Overflow

Hide dynamically created HTML element with JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related