Q:

Append an entire array except for a specified variable

Thank you for checking my question.
I am trying to display the following array as an unordered list on the page:
var answers = ["cat", "dog", "horse", "hamster", "duck"]

However, if within this array there is this variable:
var x = $('#my-input').val()

I would want it to be removed from the displayed array. That is, if a user types in, for example, "duck" into the input, I don't want the "duck" to be among the array items displayed on the page. I hope I'm being clear.
Here is the js code I use to display the array onto the page:
$("#button").click(function(e){

    var answers = ["cat", "dog", "horse", "hamster", "duck"]
    var x = $('#my-input').val()

    if(jQuery.inArray(x, answers) !== -1) {
        $('#my-div').append(answers);
    }

});

As you can see I am struggling with two things:
1) appending the array as an unordered list of elements (I am looking for a better solution than manually typing in: $('#my-div').append("<ul> + <li> + answers[0] + </li> + </ul>") for all items.
2) removing one item from the array which is the value of the input.
Thanks again!

A:

Filter the existing array:
const val = $('#my-input').val()
const newArray = answers.filter(a => a != val) 

as for appending, your method is fine. you can use documentFragment as described here https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment#Example 
var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']

var fragment = new DocumentFragment()

fruits.forEach(function (fruit) {
  var li = document.createElement('li')
  li.innerHTML = fruit
  fragment.appendChild(li)
})

list.appendChild(fragment)

it has some advantages such as your dom will be updated at once hence the reflow will happen only 1 time.
but this is the same as what you're doing with append (see this answer)

