"jquery append 添加了额外的元素"

Question

我正在使用 jQuery 附加到一个 div，它附加了一个额外的关闭图标，但我不明白为什么。 如果您运行下面的代码片段并单击“添加更多”，您将看到一个额外的时间 (x) 图标，并且“此处的消息”文本看起来是粗体的。

 $(function() { $("#add").click(function() { $('<div class="row domainName"><div class="col"><div class="input-group mb-2"><span class="input-group-text bg-white"><i class="fas fa-lock text-secondary"></i></span><input type="text" class="form-control" placeholder="Domain"><span class="remove input-group-text bg-white"><a href="javascript:void(0);"><i class="fas fa-times"></li></a></span></div></div><div class="col"> message here </div></div>').appendTo("#DomainsList"); }); $("#DomainsList").on("click", ".remove", function() { $(this).closest('.domainName').remove(); }); });

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <section id="DomainsList"> <div class="row"> <div class="col"> <div class="input-group mb-2"> <span class="input-group-text bg-white"><i class="fas fa-lock text-secondary"></i></span> <input type="text" class="form-control" placeholder="Domains"> </div> </div> <div class="col">message here</div> </div> </section> <a href="javascript:void(0);" id="add"><i class="fas fa-plus-circle"></i> Add More</a>

Answer 1

此问题是由键入错误引起的。

<\/code> . <i><\/code>标签应该以<\/code>结束。

在您的代码中， <i><\/code>用<\/li><\/code>关闭。

在将代码添加为字符串时，使用模板字符（`）而不是单引号（'）将有助于提高可读性。

 <\/span> <input type="text" class="form-control" placeholder="Domain"\/> <span class="remove input-group-text bg-white"> <a href="javascript:void(0);"> <i class="fas fa-times"> <\/a> <\/span> 

<\/span> <input type="text" class="form-control" placeholder="Domains">   <div class="col">message here  <\/section> <a href="javascript:void(0);" id="add"><i class="fas fa-plus-circle"> Add More<\/a><\/code><\/pre>
"

Answer 2

//不要使用i标签中的fas fa-times类并添加到span标签html中，并添加css .remove {cursor：pointer;}以在鼠标悬停时显示手形光标，请参见下面的代码$（“#add” ).click(function() { $('这里有消息').appendTo("#DomainsList"); });

Answer 3

小问题是中断你的输出。 您的起始标签是<i><\/code>而结束标签是<li><\/code>而您在#DomainsList<\/code>中附加消息块，这就是问题所在。

在这里查看如何在 jQuery 中create and append<\/code>多个元素，它使您的代码易于阅读<\/strong>

jQuery 创建和追加多个元素<\/a>

改变：

<i class="fas fa-times"></li>