没有显示输入字段的设置值

Question

当我点击跨度删除地址时，它从ui中删除它，但不是从列表中删除，removeItem的打印值为空字符串""。 以及如何通过stringList输入value=""与id clientAdd而不显示它在输入。

var stringList = []; 
 
$("#clientAdd").keypress(function(e) { 
 
    if (e.which === 13) { 
 
    $(".target").append("<a href='#' class='tag'>" + "<span class='removeAddress'>" + '+' + "</span>" + this.value + "</a>"); 
 
    stringList.push(this.value); 
 
    this.value = ""; 
 
    console.log(stringList); 
 
    $(document).on("click", ".removeAddress", function() { 
 
     var removeItem = $(this).parent().parent().val(); 
 
     console.log(removeItem); 
 
     stringList.splice($.inArray(removeItem, stringList), 1); 
 
     $(this).parent().remove(); 
 

 
     console.log(stringList); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="form-group"> 
 
    <div class="col-md-12 col-sm-12"> 
 
     <label>Address *</label> 
 
     <div class="target"></div> 
 
     <input type="text" id="clientAdd" name="address" value="" class="form-control required"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

试试这个

1. 其母公司没有文字parent of parent。所以你需要得到与$(this).parent().clone().children().remove().end().text()。它的父用的文本值只会获取父文本。 end() documentation
2. 除去点击的元素之后。你是创建使用经由映射函数剩余removeddress

var stringList = []; 
 
$("#clientAdd").keypress(function(e) { 
 
    if (e.which === 13) { 
 
    $(".target").append("<a href='#' class='tag'>" + "<span class='removeAddress'>" + '+' + "</span>" + this.value + "</a><br>"); 
 
    stringList.push(this.value); 
 
    this.value = ""; 
 
    console.log(stringList); 
 
    $(document).on("click", ".removeAddress", function() { 
 
     var removeItem = $(this).parent().clone().children().remove().end().text(); 
 
     console.log(removeItem); 
 
     stringList = $('.removeAddress').map(function(){ 
 
     return $(this).parent().clone().children().remove().end().text() 
 
     }).get() 
 
     $(this).parent().remove(); 
 
     console.log(stringList); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="form-group"> 
 
    <div class="col-md-12 col-sm-12"> 
 
     <label>Address *</label> 
 
     <div class="target"></div> 
 
     <input type="text" id="clientAdd" name="address" value="" class="form-control required"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

可以隐藏整个输入阵列，也可以使用输入类型=“隐藏” 。通常你有一个输入显示为人类作为事件触发和输入隐藏的值在服务器端处理

<div class="row"> 
      <div class="form-group"> 
      <div class="col-md-12 col-sm-12"> 
       <label>Address *</label> 
       <div class="target"></div> 
       <input type="text" id="clientAdd" name="address" value="" class="form-control required"> 
       <input type="hidden" id="clientAddCode" name="addressCode"> 
      </div> 
      </div> 
</div> 


var stringList = []; 
$("#clientAdd").keypress(function (e) { 
if (e.which === 13) { 
    $(".target").append("<a href='#' class='tag'>" +"<span class='removeAddress'>"+'+'+"</span>"+ this.value + "</a>"); 
     stringList.push(this.value); 
     this.value = ""; 
     console.log(stringList); 
     $("#clientAddCode").val(stringList); 
     $(document).on("click", ".removeAddress", function() { 
      var removeItem = $(this).parent().parent().val(); 
      console.log(removeItem); 
      stringList.splice($.inArray(removeItem, stringList) ,1); 
      $(this).parent().remove(); 

      console.log(stringList); 
      $("#clientAddCode").val(stringList); 
     }); 
} 
});