遍历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中横向导航，而不是向下导航。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;