【问题标题】:Delete all elements with same class attribute but leaving one删除所有具有相同类属性的元素,但保留一个
【发布时间】:2014-06-18 11:43:49
【问题描述】:

我可以使用 jquery remove 函数删除所有带有名为 trSkillCls 的类的文本框。我想要实现的目标是,如果有 5 个具有相同类名的文本框,我不想全部删除,但只有 4 个应该删除,即总是少一个元素。我必须实际编写一个函数来删除所有文本字段,只留下一个文本字段留在保存按钮单击上。 这是我的代码:

$("#addAnotherSkillBtn").click(function(){
  addAnotherSkill();
 });    

function addAnotherSkill(){

  var trSkillHTML = $("<div />").append($("#trSkill").clone()).html();                      
  $("#tBSkill").append(trSkillHTML);                        
}

function removeSkill(self){
  var delBtnCtr = $('#tBSkill').find('.deleteSkillCls').length;                     
  if(delBtnCtr > 1)
$(self).closest('tr').remove();
}

还有 HTML:

<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
    <td ><strong>Employee</strong></td>
    <td width="2%">:</td>
    <td width="82%"><input name="empName" id="empName" type="text" style="width:100%;height:30" maxlength="30"  ></td>
</tr>                                       

<tr>

    <table  class="skillTable" border="0" cellpadding="0" cellspacing="0" width="480">
        <tbody id="tBSkill">
            <tr id="trTitle">
                <td width="206"><strong>Skill</strong></td>

                <td width="270"><strong>Level</strong></td>
                <td></td>
            </tr>

            <tr id="trSkill" class="trSkillCls">
                <td><input  name="skill" id="skillP0" style="height:30;width:190;" maxlength="60" autocomplete="off" tooltip="Please enter only one IT skill per box." type="text"></td>
                <td >
                    <select name="ddlSkillLevel" class="w180">
                        <option value="-1">Level</option>  
                        <option value="00" selected="selected">Beginner</option>  
                        <option value="01">Intermediate</option>  
                        <option value="02" >Expert</option> 
                        <!-- <option value="03">3</option>  <option value="04">4</option>  <option value="05">5</option>  <option value="06">6</option>  <option value="07">7</option>  <option value="08">8</option>  <option value="09">9</option>  <option value="10">10</option>  <option value="11">11</option>            -->
                    </select> 

                </td>

                <td>
                    <input type="button" class="deleteSkillCls" name='parentDel' onclick="removeSkill(this)" value="Delete">
                </td>

            </tr>
        </tbody>
    </table>
</tr>
<tr>
    <td></td>
</tr>
<tr>
    <td>
        <input type="hidden" id="str" name="str" value="" /> 
        <input type="button" name="addAnotherSkill" id='addAnotherSkillBtn' value="Add Another Skill">
        <input type="submit" name="submit" id="btnSave" value="Save"> 
        <input type="reset" name="reset" value="Reset"></td>
    </tr>
</table>

【问题讨论】:

  • 对于哪个元素留给文档有什么规则吗?
  • @Teemu 可以删除所有 5 个具有相同类名的文本框,但我只希望删除 4 个..即总是少一个。
  • #trSkill 它的克隆 5 次是无效标记由于 id 重复 导致不同的行为。
  • @Jai。你说的是真的。但是当我添加它们时,它只会选择带有 id 的原始的。 append() 添加具有不同标识的元素
  • @Surily 那么一切都很好。

标签: javascript jquery html dom


【解决方案1】:

除了首先使用下面的 jQuery 之外,您可以删除所有内容(假设没有保留哪个特定标准):

$('.trSkillCls').not(':first').remove();

Demo

【讨论】:

    【解决方案2】:

    假设你想保留第一个元素,你可以通过以下方式:

    $('.trSkillCls:not(:first)').remove();
    

    【讨论】:

      【解决方案3】:

      在 jquery 中使用 :lt() 选择器

      $(document).ready(function(){
          var count = $(".trSkillCls").length;
      
          $(".trSkillCls:lt("+(count-1)+ ")").remove();
      });
      

      或者试试这个

       $(".trSkillCls:gt(0)").remove();
      

      【讨论】:

      • @sudharshan。我不能硬编码到 4,它可以是任意数量的文本框..它只是删除计数应该比总数少 1
      • 谢谢@jai 我很困惑我在用什么 lt 或 gt 非常感谢你
      【解决方案4】:

      可能有很多方法可以做到这一点,我第一次看到的是:

      $(selector for the one you want to keep).siblings().remove();
      

      【讨论】:

      • 你确定吗?
      • 是的;不过,@Bhushan Kawadkar 的回答要好得多。
      【解决方案5】:

      使用.gt()伪选择器;不管他们有多少,第一个总是被留下。

      $(".trSkillCls:gt(0)").remove();
      

      演示

      $(".trSkillCls:gt(0)").remove();
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <table width="100%" border="0" cellspacing="1" cellpadding="3">
      <tr>
          <td ><strong>Employee</strong></td>
          <td width="2%">:</td>
          <td width="82%"><input name="empName" id="empName" type="text" style="width:100%;height:30" maxlength="30"  ></td>
      </tr>                                       
      
      <tr>
      
          <table  class="skillTable" border="0" cellpadding="0" cellspacing="0" width="480">
              <tbody id="tBSkill">
                  <tr id="trTitle">
                      <td width="206"><strong>Skill</strong></td>
      
                      <td width="270"><strong>Level</strong></td>
                      <td></td>
                  </tr>
      
                  <tr id="trSkill" class="trSkillCls">
                      <td><input  name="skill" id="skillP0" style="height:30;width:190;" maxlength="60" autocomplete="off" tooltip="Please enter only one IT skill per box." type="text"></td>
                      <td >
                          <select name="ddlSkillLevel" class="w180">
                              <option value="-1">Level</option>  
                              <option value="00" selected="selected">Beginner</option>  
                              <option value="01">Intermediate</option>  
                              <option value="02" >Expert</option> 
                              <!-- <option value="03">3</option>  <option value="04">4</option>  <option value="05">5</option>  <option value="06">6</option>  <option value="07">7</option>  <option value="08">8</option>  <option value="09">9</option>  <option value="10">10</option>  <option value="11">11</option>            -->
                          </select> 
      
                      </td>
      
                      <td>
                          <input type="button" class="deleteSkillCls" name='parentDel' onclick="removeSkill(this)" value="Delete">
                      </td>
      
                  </tr><tr id="trSkill" class="trSkillCls">
                      <td><input  name="skill" id="skillP0" style="height:30;width:190;" maxlength="60" autocomplete="off" tooltip="Please enter only one IT skill per box." type="text"></td>
                      <td >
                          <select name="ddlSkillLevel" class="w180">
                              <option value="-1">Level</option>  
                              <option value="00" selected="selected">Beginner</option>  
                              <option value="01">Intermediate</option>  
                              <option value="02" >Expert</option> 
                              <!-- <option value="03">3</option>  <option value="04">4</option>  <option value="05">5</option>  <option value="06">6</option>  <option value="07">7</option>  <option value="08">8</option>  <option value="09">9</option>  <option value="10">10</option>  <option value="11">11</option>            -->
                          </select> 
      
                      </td>
      
                      <td>
                          <input type="button" class="deleteSkillCls" name='parentDel' onclick="removeSkill(this)" value="Delete">
                      </td>
      
                  </tr>
                  <tr id="trSkill" class="trSkillCls">
                      <td><input  name="skill" id="skillP0" style="height:30;width:190;" maxlength="60" autocomplete="off" tooltip="Please enter only one IT skill per box." type="text"></td>
                      <td >
                          <select name="ddlSkillLevel" class="w180">
                              <option value="-1">Level</option>  
                              <option value="00" selected="selected">Beginner</option>  
                              <option value="01">Intermediate</option>  
                              <option value="02" >Expert</option> 
                              <!-- <option value="03">3</option>  <option value="04">4</option>  <option value="05">5</option>  <option value="06">6</option>  <option value="07">7</option>  <option value="08">8</option>  <option value="09">9</option>  <option value="10">10</option>  <option value="11">11</option>            -->
                          </select> 
      
                      </td>
      
                      <td>
                          <input type="button" class="deleteSkillCls" name='parentDel' onclick="removeSkill(this)" value="Delete">
                      </td>
      
                  </tr>
              </tbody>
          </table>
      </tr>
      <tr>
          <td></td>
      </tr>
      <tr>
          <td>
              <input type="hidden" id="str" name="str" value="" /> 
              <input type="button" name="addAnotherSkill" id='addAnotherSkillBtn' value="Add Another Skill">
              <input type="submit" name="submit" id="btnSave" value="Save"> 
              <input type="reset" name="reset" value="Reset"></td>
          </tr>
      </table>

      【讨论】:

      • 有人恶意否决了这个答案,没有说明原因,但正如演示清楚地表明的那样,它可以按预期工作。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-07-03
      • 2018-08-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多