Question

我正在尝试开发一种用户提交的表单：

项目
数量

该表单还具有2个按钮：

添加项目和删除项目

单击“添加项目”后，表单会添加新行（可以使用），但是我希望添加项目时隐藏“添加项目”按钮下面是html＆jQuery代码，我试图将其隐藏起来。然后，但没有运气大声笑

请告知

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
	var i = 1;

	$('#add-item').click(function() { 	
		i++;		
		$('#table-fields')
		.append('<tr id="row'+i+'"><td><input type="text"/></td><td><input/></td><td><button>ADD</button></td><td><button id="'+i+'">REMOVE</button></td></tr>');
	  });
	}
);


</script>
</head>
<body>
<form id="items-to-move">
  <table id="table-fields">
    <tr>
    <td><input/></td>
    <td><input/></td>
    <td><button type="button" id="add-item">ADD</button></td>
    <td><button id="remove-item">REMOVE</button></td>
    </tr>
  </table>
</form>
</body>
</html>

Answer 1

需要大量工作

第一个： ID应该是唯一的..请改用类

第二名：，您需要Event binding on dynamically created elements?

第3次：：为删除按钮创建click事件，并使用.closest('tr')来捕获父行

$(document).ready(function() {
  var i = 1;
  // add item click
  $(document).on('click','.add-item',function(e) {
    e.preventDefault();
    i++;		
    $('#table-fields')
    .append('<tr id="row'+i+'"><td><input type="text"/></td><td><input/></td><td><button type="button" class="add-item">ADD</button></td><td><button type="button" class="remove-item">REMOVE</button></td></tr>');
  });

  // remove item click
  $(document).on('click','.remove-item',function(e) {
    e.preventDefault();
    $(this).closest('tr').remove();
  });
});

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="items-to-move">
  <table id="table-fields">
    <tr>
    <td><input/></td>
    <td><input/></td>
    <td><button type="button" class="add-item">ADD</button></td>
    <td><button type="button" class="remove-item">REMOVE</button></td>
    </tr>
  </table>
</form>
</body>
</html>

注意：该代码只是如何开始..但您仍需要进行一些检查，例如-如果仅一行，则不要删除它-添加项目或删除项目后有多少行-

在使用e.preventDefault();时无需使用type="button"，我在这里用它来仔细检查

Answer 2

要在单击按钮时隐藏按钮，请使用

$(this).hide();

例如

$('#add-item').click(function() {   
    $(this).hide();
    i++;        
    $('#table-fields')
    .append('<tr id="row'+i+'"><td><input type="text"/></td><td><input/></td><td><button>ADD</button></td><td><button id="'+i+'">REMOVE</button></td></tr>');
  });
}

点击功能中的

。但是，正如Ryan指出的那样，第二次单击“添加”时，您会遇到更大的问题。

Answer 3

在动态添加元素时，应使用以下内容：

 $(document).on("click", "selector", function(){});

使其起作用。

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
	var i = 1;

	$(document).on('click','.add-item',function() { 	
		i++;		
        $(this).remove();
		$('#table-fields')
		.append('<tr id="row'+i+'"><td><input type="text"/></td><td><input/></td><td><button type="button" class="add-item">ADD</button></td><td><button  type="button" class="remove">REMOVE</button></td></tr>');
	  });
	}
);
 $(document).on('click','.remove',function(e) {
  
$(this).parent().parent().remove();
  });

</script>
</head>
<body>
<form id="items-to-move">
  <table id="table-fields">
    <tr>
    <td><input/></td>
    <td><input/></td>
    <td><button type="button" class="add-item">ADD</button></td>
    <td><button type="button" class="remove">REMOVE</button></td>
    </tr>
  </table>
</form>
</body>
</html>

使用jQuery

3 个答案: