刪除 jquery 中的文本字段值

Question

當我點擊添加時，它會顯示帶有值的文本字段。 當我點擊刪除它的隱藏。 但是當我點擊刪除時，我也想刪除文本字段值。

css

#second {
    display: none;
}
#third {
    display: none;
}
#forth {
    display: none;
}
#fifth {
    display: none;
}

html

<div id="header">
     <a href="#" id="add1">add</a> - <a href="#" id="remove">remove</a>
    <div id="first" class="toggle"><input type="text" value="1" name="sid[]">first</div>            
    <div id="second" class="toggle"><input type="text" value="2" name="sid[]">second</div>
    <div id="third" class="toggle"><input type="text" value="3" name="sid[]">third</div>
    <div id="forth" class="toggle"><input type="text" value="4" name="sid[]">forth</div>
    <div id="fifth" class="toggle"><input type="text" value="5" name="sid[]">fifth</div>
</div>

查詢

$(document).ready(function() {
        $("#add1").click(function() {
            $('.toggle:not(:visible)').first().show();
        });
        $("#remove").click(function() {
            $('.toggle:visible').last().hide();

        });
    });

這是我的代碼： Jsfiddle

Answer 1

只需添加.find('input').val(''); 在.hide(); 成為

$('.toggle:visible').last().hide().find('input').val('');

演示

Answer 2

試試這個代碼：-

<script>
$(document).ready(function() {
        $("#add1").click(function() {
            $('.toggle:not(:visible)').first().show();
        });
        $("#remove").click(function() {
         $('.toggle:visible').last().find(':input').val('');
            $('.toggle:visible').last().hide();


        });
    });
</script>

Answer 3

嗨，現在習慣了.find()和.val()像這樣

$(document).ready(function() {
        $("#add1").click(function() {
            $('.toggle:not(:visible)').first().show();
        });
        $("#remove").click(function() {
            var valNon = $('.toggle:visible').last().hide();
               valNon.find('input').val(''); // add this line   

        });
    });

Answer 4

用這個

$(document).ready(function() {
        $("#add1").click(function() {
            $('.toggle:not(:visible)').first().show();
        });
        $("#remove").click(function() {
           $('.toggle:visible').last().hide().find('input').val('');
        });
    });

傑斯菲德爾