如何在Javascript中单击按钮后隐藏元素

Question

I am unable to hide a list on button click on partial view. This is what I am trying to do, but the following code does nothing. Can anyone please help me with this?

<script>       
     $(document).ready(function () {
        $('#resultBtn').onclick(function (e) {
            e.preventDefault();
            $('#List').hide();
            commit();
        })
      });
</script>

Answer 1

We might need a JSFiddle, the script seems to be good, but I guess the problem comes from your HTML5 code actually. Anyway, here are some advice that might help.

#resultBtn is written in camelCase, so #List should be #list . Plus, if you have a problem, try to console.log('something') in the click callback function to see if something happen.

Oh, I finally spotted the problem , you should easily find it if you open the console of your browser. You can not do onclick() on a jQuery element, it's only click . A good habit could be to use edit on() (or bind() ) , you might find it useful someday.

$(function() {
    $('#resultBtn').on('click', function(e) {
        e.preventDefault();
        $('#list').hide();
        commit();
    });
});

Hope this helped!

Answer 2

Make the element invisible, but treat it as if it is still there:

document.getElementById("resultBtn").onclick = function() {
document.getElementById("List").style.visibility = "hidden";
return false;
}

Hide the element and treat it as if it is non-existent:

document.getElementById("resultBtn").onclick = function() {
document.getElementById("List").style.display = "none";
return false;
}

Answer 3

You can set display property to none to hide the element

$(document).ready(function () {
            $('#resultBtn').onclick(function (e) {
                e.preventDefault();
                $('#List').css('display','none'); //<--- like here
                commit();
            })
          });