在jQuery DOM中遍歷失敗？

Question

我想在單擊按鈕時刪除輸入。 下面是我的DOM

我試過了但是沒用。

$('#changePassword').click(function(){
            $(this).find('.modal-body .inputWrap input').remove();
        });

我也tried $(this).find('.modal-body .inputWrap input').remove();

Answer 1

.modal-body元素不是#changePassword元素的后代，因此使用$(this).find(...)將不會返回任何元素。

相反， model-body是按鈕的祖先，因此您可以使用.closest（）來找到它，然后在該元素上使用.find（）來找到目標輸入元素。

$('#changePassword').click(function () {
    $(this).closest('.modal-body').find('.inputWrap input').remove();
});

Answer 2

在$('#changePassword').click ， this表示#changePassword ，它是您要搜索的.inputWrap的同級對象。 您需要在DOM中橫向瀏覽而不是向下瀏覽。

 $('#changePassword').click(function () { $(this).prev('.inputWrap').find('input').remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="inputWrap"> <input type="text" value="where"> <input type="text" value="who"> </div> <button id="changePassword">Click!</a> </div>