Question

我想改进这个功能，因为我是jquery的新手，我需要一个更好的方法来使用下面的函数删除元素。任何类型的调整，意见，改进都会有所帮助。当我输入重复的数字时，下面是div，当用户删除我需要删除使用以下函数的元素的数字时，会添加一条错误消息。

function removeElements(input){
    if($(input).next().next().is('label.errorLabel')){
        $(input).next().remove();
        $(input).next().remove();
    }else if($(input).next().is('a.addUserNo') && $(input).next().next().next().is('label.errorLabel')){
        $(input).next().next().remove();
        $(input).next().next().remove();
    }
}

<div id="usrNoDiv" style="padding-left: 50%;">
    <input type="text" id="8855885555" name="usrNo1" value="8855885555"><br> 
    <br>
    <input type="text" id="8855588888" name="usrNo2" value="8855588888"><br> 
    <br><input type="text" name="usrNo3">
    <a href="#" class="addUserNo"><i class="fa fa-plus-circle" style="font-size: 20px;padding-left: 5px;"></i></a><br>
    <label class="errorLabel" style="color:red">User already Logged</label><br><br>
    <button type="button" id="submitData">Submit</button>
</div>

Answer 1

你在这里遇到了一些错误的事情。

首先你有很多br元素，因此$(input).next().next()始终是br而不是label

其次你应该不使用jQuery $()调用超过必要的次数。更好的方法是将其保存到变量（例如var $input = $(input);），然后使用此变量（例如$(input)）而不是使用$input。

最后但并非最不重要而不是使用.next().next()，您可以.nextAll().eq(1)

.nextAll()返回所有下一个元素，.eq(1)获取第二个元素（0是第一个元素）

您的解决方案

＆＃13;

$("input").on('focus', function() {
  removeElements(this);
});

function removeElements(input) {
  var $input = $(input);
  if ($input.next().next().is('label.errorLabel')) {
    $input.next().remove();
    $input.next().remove();
  } else if ($input.next().is('a.addUserNo') && $input.next().next().next().is('label.errorLabel')) {
    $input.next().next().remove();
    $input.next().next().remove();
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="usrNoDiv" style="padding-left: 50%;">
  <input type="text" id="8855885555" name="usrNo1" value="8855885555">
  <input type="text" id="8855588888" name="usrNo2" value="8855588888">
  <input type="text" name="usrNo3">
  <a href="#" class="addUserNo"><i class="fa fa-plus-circle" style="font-size: 20px;padding-left: 5px;"></i></a>
  <label class="errorLabel" style="color:red">User already Logged</label>
  <button type="button" id="submitData">Submit</button>
</div>

＆＃13;

以下是关于如何做到这一点的想法

＆＃13;

$("input").on('focus', function() {
  removeElements(this);
});

function removeElements(input) {
  var $input = $(input);
  if ($input.nextAll().eq(1).is('label.errorLabel')) {
    $input.next().remove();
    $input.next().remove();
  } else if ($input.nextAll().eq(1).is('a.addUserNo') && $input.nextAll().eq(2).is('label.errorLabel')) {
    $input.nextAll().eq(1).remove();
    $input.nextAll().eq(1).remove();
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="usrNoDiv" style="padding-left: 50%;">
  <input type="text" id="8855885555" name="usrNo1" value="8855885555">
  <input type="text" id="8855588888" name="usrNo2" value="8855588888">
  <input type="text" name="usrNo3">
  <a href="#" class="addUserNo">
    <i class="fa fa-plus-circle" style="font-size: 20px;padding-left: 5px;"></i>
  </a>
  <label class="errorLabel" style="color:red">User already Logged</label>
  <button type="button" id="submitData">Submit</button>
</div>

＆＃13;

优化我的功能

1 个答案: