jquery append adds extra element-CodePudding

I'm using jQuery to append to a div, and it's appending an extra close icon but I can't see why. If you run the code snippet below and click "Add more", you'll see an additional times (x) icon, and the "message here" text seems bolded.

$(function() {


  $("#add").click(function() {
    $('<div ><div ><div ><span ><i ></i></span><input type="text"  placeholder="Domain"><span ><a href="javascript:void(0);"><i ></li></a></span></div></div><div > message here </div></div>').appendTo("#DomainsList");
  });

  $("#DomainsList").on("click", ".remove", function() {
    $(this).closest('.domainName').remove();
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
    <div >
      <div >
        <span ><i ></i></span>
        <input type="text"  placeholder="Domains">
      </div>
    </div>
    <div >message here</div>
  </div>
</section>
<a href="javascript:void(0);" id="add"><i ></i> Add More</a>

CodePudding user response：

This problem is caused by typing error.

<i> tag should close with </i>.

In your code, <i> close with </li>.

Using template characters(`) instead of single quotes(') will help with readability when adding code as a string.

$(function () {
  $("#add").click(function () {
    $(`
      <div >
        <div >
          <div >
            <span >
              <i ></i>
            </span>
            <input type="text"  placeholder="Domain"/>
              <span >
                <a href="javascript:void(0);">
                  <i ></i>
                </a>
              </span>
          </div>
        </div>
        <div > message here </div>
      </div>
    `).appendTo("#DomainsList");
  });

  $("#DomainsList").on("click", ".remove", function () {
    $(this).closest(".domainName").remove();
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
    <div >
      <div >
        <span ><i ></i></span>
        <input type="text"  placeholder="Domains">
      </div>
    </div>
    <div >message here</div>
  </div>
</section>
<a href="javascript:void(0);" id="add"><i ></i> Add More</a>

CodePudding user response：

Little problem is interrupt your output. Your starting tag is <i> and closing tag is <li> while you append message block inside #DomainsList that is the problem.

Look here for how to create and append multiple elements in jQuery, it's make your code easy to read

jQuery create and append multiple elements

Change:

<i ></li>

To:

<i ></i>

Here down is modified code:

$(function() {
  $("#add").click(function() {
    var appendBlock = '<div >'  
                            '<div >'  
                                '<div >'  
                                    '<span >'  
                                        '<i ></i>'  
                                    '</span>'  
                                    '<input type="text"  placeholder="Domain">'  
                                    '<span >'  
                                        '<a href="javascript:void(0);">'  
                                            '<i ></i>'  
                                        '</a>'  
                                    '</span>'  
                                '</div>'  
                            '</div>'  
                            '<div > message here </div>'  
                        '</div>';
                        
    $("#DomainsList").append(appendBlock); 
  });

  $("#DomainsList").on("click", ".remove", function() {
    $(this).closest('.domainName').remove();
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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"
/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section id="DomainsList">
  <div >
    <div >
      <div >
        <span ><i ></i></span>
        <input type="text"  placeholder="Domains">
      </div>
    </div>
    <div >message here</div>
  </div>
</section>
<a href="javascript:void(0);" id="add"><i ></i> Add More</a>

CodePudding user response：

//do not use fas fa-times class from i tag and add into span tag html ,and add css .remove { cursor: pointer;} for display hand cursor while mouse over on it, see bellow code $("#add").click(function() { $(' message here ').appendTo("#DomainsList"); });