0

I want to be able to remove only New button after two seconds, not Hey buttons.

・What I tried I wrote this code and then the result was all buttons disappeared for sure. Is it able to spot and remove only the button made by JavaScript?

  

$('button').html('<em>Hey</em>');
   
 

let newbtn = '<button>New</button>';

$('h1').append(newbtn);

setTimeout(()  => {
  
  $('button').hide();
}, 2000);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <h1 class="big-title margin-50">Hello.</h1>
    <img src="drum.png" alt="">
    <a href="http://www.google.com">Search</a>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>

    
    

<input type="text" name="" value="    ">


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

</html>

1
  • Thank you to those who answered my question. I am glad that I learned that we Don't have to do anything in HTML. And, I changed my code as you suggest and it worked!
    – Iori_ss67
    Aug 23, 2022 at 1:15

3 Answers 3

2

You have multiple buttons on the page your current code will affect all of them.

By creating an actual element and then appending that you can reference that object.

$('button').html('<em>Hey</em>');
//Actaully make the button an element
let newbtn = $('<button>New</button>');

$('h1').append(newbtn);

setTimeout(()  => {
  //Hide the element
  newbtn.hide();
}, 2000);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <h1 class="big-title margin-50">Hello.</h1>
    <img src="drum.png" alt="">
    <a href="http://www.google.com">Search</a>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>

    
    

<input type="text" name="" value="    ">


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

</html>

2
  • 1
    Subtile efficiency change suggestion: since newbtn already is a jQuery object, it could be newbtn.hide(); or newbtn.remove(); -- Remember that $() is a function call. It creates a jQuery object from the provided arg. Aug 22, 2022 at 2:14
  • @LouysPatriceBessette good catch.
    – Jon P
    Aug 22, 2022 at 2:58
0

We can use HTML classes to affiliate multiple and any HTML element and perform executions on all elements with the class name.

In your problem, assign an HTML class to buttons you append, then query that, then remove, like this:

$('button').html('<em>Hey</em>');



let newbtn = '<button class="generated">New</button>'; // notice the generated class we're adding

$('h1').append(newbtn);

setTimeout(() => {
  // use `.<classname>` to query classes:
  $('.generated').hide();
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="big-title margin-50">Hello.</h1>
<img src="drum.png" alt="">
<a href="http://www.google.com">Search</a>
<button>Click Me.</button>
<button>Click Me.</button>
<button>Click Me.</button>
<button>Click Me.</button>
<button>Click Me.</button>

<input type="text" name="" value="">

More info.

0

You can add a class to your New button, e.g. let newbtn = '<button class=\"newbt\">New</button>'; (I escaped the double quotes, it works without though apparently.)

Then set the timeout on your button's class (.newbt in this case).

p.s. I'm not sure if you were trying to set the width of the text input with all the white spaces, but it's easier to do with size as in the edit below.

$('button').html('<em>Hey</em>');
   
let newbtn = '<button class=\"newbt\">New</button>';

$('h1').append(newbtn);

setTimeout(()  => {
  
  $('.newbt').hide();
}, 2000);
    <h1 class="big-title margin-50">Hello.</h1>
    <img src="drum.png" alt="">
    <a href="http://www.google.com">Search</a>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>
    <button>Click Me.</button>   

<input type="text" name="" value="" size="25rem">

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.