Remove <button>New</button> after 2 seconds-CodePudding

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 >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>

CodePudding user response：

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 >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>

CodePudding user response：

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 >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 >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.

CodePudding user response：

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 >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>