使用加号按钮 - WordPress动态地将新字段添加到页面区域

Question

我需要点击加（+）按钮添加新的自定义字段，并在点击减去（ - ）按钮时删除新生成的自定义字段，如屏幕截图所示我附在这里。

我在WP页面后端部分（页面/帖子）中需要这个。有插件吗？

Answer 1

如果您只想添加字段并删除wordpress后端的字段，那么您可以在设置中添加页面，然后执行以下操作：

＆＃13;

＆＃13;

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});

＆＃13;

.add-field {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.add-field:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.multi-fields,.multi-field{margin-top:3%;}

.textbox { 
    border: 1px solid #848484; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    outline:0; 
    height:25px; 
    width: 275px; 
    padding-left:10px; 
    padding-right:10px; 
  }

.remove-field {
      background: rgb(202, 60, 60); /* this is a maroon */
      color: white;
      border-radius: 4px;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form role="form" action="/wohoo" method="POST">
    <div class="multi-field-wrapper">
      <button type="button" class="add-field">+</button>        
      <div class="multi-fields">
        <div class="multi-field">
          <input type="text" name="stuff[]" class="textbox">
          <button type="button" class="remove-field">-</button>
        </div>
      </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

Jquery .append（）方法将指定的内容作为jQuery集合中每个元素的最后一个子节点插入。

试试这个： http://api.jquery.com/append/

  

与.empty（）类似，.remove（）方法从DOM中获取元素。如果要删除元素本身以及其中的所有内容，请使用.remove（）。

更多信息：http://api.jquery.com/remove/

Answer 3

你还没有粘贴到目前为止尝试过的任何代码，下面的回答将帮助你了解一下，

$('#addfield').click(function () {
    var table = $(this).closest('table');
        table.append('<tr><td>Name <td> <input type="text" id="Name" value="" /> </td></tr>');

});

$('#removefield').click(function () {
    var table = $(this).closest('table');
        table.find('input:text').last().closest('tr').remove();

});