skip to Main Content

in this code when I enter a new value to the input box it will add and replace it for all P’s tag. I want to change it like when I add new value for input and click the add button create a div with .pros-print class after each other but content of P tags be equal to new input value.

  $(document).ready(function () {
      var prosinput = $("#pros-input").val();
      $("#basic-addon1").click(function () { 
        $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p></p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
        $(".pros-print").children("p").text($("#pros-input").val());
      });
      
    });
.pros-cons-inputs-wrapper{
margin-top: 100px; 
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="pros-cons-inputs-wrapper input-group mb-3 d-flex justify-content-around">

 <input 
 type="text" 
 name="user-pros" 
 id="pros-input"
 class="form-control"
 placeholder="pros" 
 aria-label="Username"
 aria-describedby="basic-addon1">
 
 <button 
 class="input-group-text me-3"
 id="basic-addon1">add
 </button>
 </div>
 
 <div class="d-flex">
  <div class="right-side-pros">
     <div class="pros-print d-flex align-items-center ">
        <p class="pros-txt"> a </p>
     </div>
  </div>
</div>
              
              
              
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

2

Answers


  1. Change your logic slightly

    $(document).ready(function () {
          var prosinput = $("#pros-input").val();
          $("#basic-addon1").click(function () { 
            $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+$("#pros-input").val()+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
          });
    });
    

    If you want to restrict duplicate entries

    var prosarr = [];
        
    $(document).ready(function () {
         var prosinput = $("#pros-input").val();
         $("#basic-addon1").click(function () { 
              let prosVal = $("#pros-input").val();
              if(prosarr.includes(prosVal)){
              return;
              }
              prosarr.push(prosVal);
              $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+prosVal+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
         });
    });
    

    Calling button click event on keydown and clear input after successful addition

    var prosarr = [];
        
    $(document).ready(function () {
    
        $("#pros-input").keydown(function(event){
            let keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13') {
                $( "#basic-addon1" ).trigger( "click" );
            }
        });
    
         var prosinput = $("#pros-input").val();
         $("#basic-addon1").click(function () { 
              let prosVal = $("#pros-input").val();
              if(prosarr.includes(prosVal)){
              return;
              }
              prosarr.push(prosVal);
              $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+prosVal+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
             $("#pros-input").val("");
        });
    });
    

    Remove div and value from array on .fa-trash-can click

    var prosarr = [];
    
    $(document).ready(function () {
             
         $(".right-side-pros").on("click", ".fa-trash-can", function (event) {
            let parentVal = $(this).siblings('p').first().html();
            prosarr = prosarr.filter(function(item) {
                    return item !== parentVal
                    });
            $(this).parent().remove();
        });
    
        $("#pros-input").keydown(function(event){
            let keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13') {
                $( "#basic-addon1" ).trigger( "click" );
            }
        });
    
         var prosinput = $("#pros-input").val();
         $("#basic-addon1").click(function () { 
              let prosVal = $("#pros-input").val();
              if(prosarr.includes(prosVal)){
              return;
              }
              prosarr.push(prosVal);
              $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+prosVal+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
             $("#pros-input").val("");
        });
    });
    

    Other way if you don’t want to use array (suggested by @Silvia Tacher )

    $(document).ready(function () {
             
         $(".right-side-pros").on("click", ".fa-trash-can", function (event) {
            $(this).parent().remove();
        });
    
        $("#pros-input").keydown(function(event){
            let keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13') {
                $( "#basic-addon1" ).trigger( "click" );
            }
        });
    
         var prosinput = $("#pros-input").val();
         $("#basic-addon1").click(function () { 
    
              let prosVal = $("#pros-input").val();
              let exists_already = $(".pros-print p:contains('" + prosVal + "')").length > 0;
              if (exists_already) return false;
    
              $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>'+prosVal+'</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
             $("#pros-input").val("");
        });
    });
    
    Login or Signup to reply.
  2. $(document).ready(function() {
      var prosinput = $("#pros-input").val();
      $("#basic-addon1").click(function() {
        prosinput = $("#pros-input").val();
        var exists_already = $(".pros-print p:contains('" + prosinput + "')").length > 0;
        if (exists_already) return false;
        $(".right-side-pros").append('<div class="pros-print d-flex align-items-center"><i class="fa-light fa-plus-large c-green me-2"></i><p>' + prosinput + '</p><i class="fa-thin fa-trash-can ms-auto c-red me-2"></i></div>');
      });
    
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search