在输入值更改时克隆和删除内容

时间:2014-11-07 01:50:08

标签: jquery html

我希望在每次用户将文本输入到给定文本框中时使用现有div并克隆它。当文本从输入中删除后,我希望删除所有克隆。

<div class="must_be_cloned">
   <label for="company_name"> Company Name </label>
   <input type="text" name="company_name" placeholder="When writing text add new input" />
</div>

1 个答案:

答案 0 :(得分:1)

工作示例:

http://jsfiddle.net/zprccsyp/5/

JavaScript的:

$(document).on('input', '.company-name', function () {
    if (this.value == '') {
        $('.cloned').remove();
    } else if(this.value.length == 1){
        var $newDiv = $(this).closest('.must_be_cloned').clone();  
        $newDiv.find('.company-name').val('');
        $newDiv.addClass('cloned').appendTo('#wrapper');
    }
});

HTML:

<div id="wrapper">
    <div class="must_be_cloned">
        <label for="company_name">Company Name</label>
        <input type="text" id="company-name" name="company_name" placeholder="When writing text add new input" />
    </div>
</div>