2 秒后删除<button>新</button>

我想在两秒钟后只删除"新建"按钮，而不是"嘿"按钮。

・我尝试了什么我写了这个代码，结果是所有的按钮都消失了。它是否能够只发现并删除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>

如果页面上有多个按钮，当前代码将影响所有按钮。

通过创建一个实际的元素，然后附加它，就可以引用该对象。

$('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>

我们可以使用HTML类来关联多个和任何HTML元素，并对所有具有类名的元素执行。

在您的问题中，将一个HTML类分配给您附加的按钮，然后查询，然后删除，如下所示：

$('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="">

更多信息。

您可以在New按钮中添加一个类，例如let newbtn = '<button class="newbt">New</button>';(我转义了双引号，但显然没有。(

然后在按钮的类上设置超时(在本例中为.newbt(。

p.s.我不确定您是否试图用所有空格设置文本输入的宽度，但使用size更容易，如下面的编辑所示。

$('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>

相关内容

最新更新

热门标签：