CODEWITHSUNDEEP
jquerycss
chris
chris

Reputation: 23

how can i hide the child image in a button

<!DOCTYPE html>
<html lang="en">
<head>
  <title>question</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
function $(selector) {
    var resultObject = {
        hide: function () {
            ($(selector).style.visibility = "hidden";
            //($(selector).next().style.visibility = "hidden";
        }
    };  
    return resultObject;
}
</script>
</head>
<body>

<div class="container">
    <button class="btn btn-primary btn-block" style="text-align:left; padding-left:16px" id ="another"  onclick="$(this).hide();">click
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnwz8a0e72g6QXU5j3DT1bkyheIhJIW7O8razr8sydbUYOK6sF&s" 
    id="up" style="display: inline"width="20" height="20">
    </button>
</div>
</body>
</html>

The above code hides the button when i click on it but i only want to hide the image within the button rather than the whole button

Upvotes: 1

Views: 99

Answers (3)

iman madani
iman madani

Reputation: 299

use this code : 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>question</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
    function $(selector) {
      var resultObject = {
        hide: function() {
          //($(selector).style.visibility = "hidden";
          document.getElementById("up").style.display = "none";
        }
      };
      return resultObject;
    }
  </script>
</head>

<body>

  <div class="container">
    <button class="btn btn-primary btn-block" style="text-align:left; padding-left:16px" id="another" onclick="$(this).hide();">click
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnwz8a0e72g6QXU5j3DT1bkyheIhJIW7O8razr8sydbUYOK6sF&s" 
    id="up" style="display: inline"width="20" height="20">
    </button>
  </div>
</body>

</html>

Upvotes: 0

vpaladino778
vpaladino778

Reputation: 157

If you change onclick from $(this).hide(); to $(this).children('img').hide(); it will apply the hide function to all the children that are 'img'.

<div class="container">
    <button class="btn btn-primary btn-block" style="text-align:left; padding-left:16px" id ="anotherFucker"  onclick="$(this).children('img').hide();">click
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnwz8a0e72g6QXU5j3DT1bkyheIhJIW7O8razr8sydbUYOK6sF&s" 
    id="up" style="display: inline"width="20" height="20">
    </button>
</div>

Here's an example jsfiddle.

Upvotes: 2

Tony S
Tony S

Reputation: 571

you can try $(this).children().hide();

Upvotes: 0

Related Questions