Hiding elements in HTML via JQuery, but not working-CodePudding

Trying to currently write a function that hides an HTML table element whenever an option is chosen on a dropdown menu. However, trying to test this doesn't seem to yield results.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
$(function () { 
    $(".testClass").hide();
});
</script>

And the HTML:

<div >Test</div>

CodePudding user response：

You are not supposed to put anything between the jquery tags.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Then create another script inside the body of your application. Here is an example from w3schools:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

The example above shows how to hide an element using jQuery with a click of a button.

However, I am not sure it is the best way to hide an element in Angular. You can do it with an example from here:

Angular 2 Show and Hide an element

Please look at gentiane answer.

CodePudding user response：

Close original the script tag used for using src, and open another one for the inline script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(function () { 
    $(".testClass").hide();
});
</script>

This is jQuery, and there's nothing specifically Angular about this.