如何使用jQuery克隆在单击按钮上隐藏和显示删除按钮

Question

我正在使用一个表格，点击添加更多按钮，然后点击表格行复制。

我希望默认情况下不显示删除按钮，并且单击添加更多按钮然后在特定表格上显示删除按钮行。

$(document).ready(function() {
  var i = 1;
  $('#more_btn').click(function() {
    i++;
    $clone = $('#first').clone(true);
    $clone.attr('id', "row" + i);

    $clone.find('.btn_remove').attr('data-remove-id', 'row' + i);
    $('#myTable tbody').append($clone);
  });

  $('#myTable').on('click', '.btn_remove', function() {
    var button_id = $(this).data("remove-id");
    alert(button_id)
    $('#row' + button_id + '').remove();
  });
});

body {
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="striped display" cellspacing="0" width="100%" id="myTable">
  <tbody>
    <tr id="first">
      <td class="input-field col s2">
        <label>Week Days</label>
        <select id="week_days" data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple">
          <option value="1">Monday</option>
          <option value="2">Tuesday</option>
          <option value="3">Wednesday</option>
          <option value="4">Thursday</option>
          <option value="5">Friday</option>
        </select>
      </td>
      <td id="btn"><a data-remove-id="" class="btn_remove btn right" href="javascript:void(0);">Remove</a></td>
      <td><button class="btn_remove" data-remove-id="">
      Remove
      </button></td>
    </tr>
  </tbody>
</table>

Here is fiddle link

问题是表格的第一行显示了一个删除按钮，用户单击该按钮，这就是为什么它不能首次显示。

Answer 1

最初隐藏按钮，并在克隆元素时显示。

timer(0, 5000)
  .pipe(
    exhaustMap(() => this.httpService.getEvents()),
    take(1),
    repeat(),
  )
  .subscribe(console.log)

尝试修改后的fiddle

Answer 2

Updated fiddle 。

无需获取id并连接字符串...您可以像这样简单地使用closest('tr')：

$('#myTable').on('click','.btn_remove',function(){ 
     $(this).closest("tr").remove();
});

尝试完全不使用id，这样就不必增加诸如：

$(document).ready(function() {
  $('.more_btn').click(function() {
    var cloned_row = $('#first').clone(true).removeAttr('id');
    cloned_row.find('.btn_remove').removeClass('hide');
    $('#myTable tbody').append(cloned_row);
  });

  $('#myTable').on('click', '.btn_remove', function() {
    $(this).closest("tr").remove();
  });
});

body {
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="striped display" cellspacing="0" width="100%" id="myTable">
  <tbody>
    <tr id="first">
      <td class="input-field col s2">
        <label>Module</label>
        <select data-rel="chosen" name="moduleid[]" class="form-control">
          <?php 
                $RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");
                while($URow=mysqli_fetch_array($RowRes)){
                echo "<option value=".$URow[0].">".$URow[1]."</option>";}?>
        </select>
      </td>
      <td class="input-field col s2">
        <label>Week Days</label>
        <select data-rel="chosen" name="week_days[]" class="form-control week_days" multiple="multiple">
          <option value="1">Monday</option>
          <option value="2">Tuesday</option>
          <option value="3">Wednesday</option>
          <option value="4">Thursday</option>
          <option value="5">Friday</option>
        </select>
      </td>
      <td><button type="button" name="add" class="btn right more_btn">Add More</button></td>
      <td><button class="btn_remove hide">Remove</button></td>
    </tr>
  </tbody>

Answer 3

$('#myTable').on('click','.btn_remove',function(){ 
   var button_id = $(this).data("remove-id");  
   $('#'+button_id).remove();  
});

Answer 4

简单的方法可能是将一个类.first-remove分配给第一个Remove按钮。然后，在克隆之后，删除此类，以便在添加的每个新行上显示Remove按钮：

$(document).ready(function() {
  var i = 1;
  $('#more_btn').click(function() {
    i++;
    $clone = $('#first').clone(true);
    $clone.attr('id', "row" + i);

    $clone.find('.btn_remove').attr('data-remove-id', 'row' + i).removeClass('first-remove');
    $('#myTable tbody').append($clone);


  });

  $('#myTable').on('click', '.btn_remove', function() {
    var button_id = $(this).data("remove-id");
    alert(button_id)
    $('#row' + button_id + '').remove();
  });

});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.first-remove {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="striped display" cellspacing="0" width="100%" id="myTable">
  <tbody>
    <tr id="first">
      <td class="input-field col s2">
        <label>Module</label>
        <select data-rel="chosen" name="moduleid[]" class="form-control">
          <?php 
                $RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");
                while($URow=mysqli_fetch_array($RowRes)){
                echo "<option value=".$URow[0].">".$URow[1]."</option>";}?>
        </select>
      </td>
      <td class="input-field col s2">
        <label>Week Days</label>
        <select id="week_days" data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple">
          <option value="1">Monday</option>
          <option value="2">Tuesday</option>
          <option value="3">Wednesday</option>
          <option value="4">Thursday</option>
          <option value="5">Friday</option>
        </select>
      </td>
      <td><button type="button" name="add" id="more_btn" class="btn right">Add More</button></td>
      <td><button class="btn_remove first-remove" data-remove-id="">
      Remove
      </button></td>
    </tr>
  </tbody>

Answer 5

您有一个小错误。

$(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
    i++;
    $clone = $('#first').clone(true);
    $clone.attr('id', "row" + i);
    
    $clone.find('.btn_remove').attr('data-remove-id', 'row'+i);
   $('#myTable tbody').append($clone);

   
});

$('#myTable').on('click','.btn_remove',function(){ 
       var button_id = $(this).data("remove-id");  
       alert(`${button_id}`)
       $(`#${button_id}`).remove();  
  });

});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="striped display" cellspacing="0" width="100%" id="myTable">
  <tbody>
    <tr id="first">
       <td class="input-field col s2">
       <label>Module</label>
          <select  data-rel="chosen" name="moduleid[]" class="form-control">
              <?php 
                $RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");
                while($URow=mysqli_fetch_array($RowRes)){
                echo "<option value=".$URow[0].">".$URow[1]."</option>";}?>
          </select>                 
        </td>
        <td class="input-field col s2">
           <label>Week Days</label>
             <select id="week_days" data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple">
              <option value="1">Monday</option>
              <option value="2">Tuesday</option>
              <option value="3">Wednesday</option>
              <option value="4">Thursday</option>
              <option value="5">Friday</option>
             </select>
          </td>
      <td><button type="button" name="add" id="more_btn" class="btn right">Add More</button></td>
      <td><button class="btn_remove" data-remove-id="">
      Remove
      </button></td>
     </tr>
</tbody>