javascript - 通过单击按钮引用 li 的跨度

Question

我正在尝试使用 php、ajax 和 mysql 创建一个待办事项应用程序。 应该有一个按钮，一旦单击，就会从屏幕和数据库中删除该项目，但我不知道如何表示我想删除某个项目。

(每个项目在数据库中都有一个唯一的 ID，还有包含它的列表中的文本和 ID)

我的 html 示例如下:

 <ul id="list">
    <li class="i­tem">
        <div class="draggertab">
            <img src="imatges/botofletxa.jpg" width="30" height="30">
        </div>
        <div class="deletetab">
            <img src="imatges/botocreu.jpg" width="30" height="30">
        </div> <span>Buy some cookies</span> 
    </li>
</ul>

我的 JavaScript 代码看起来像这样:

  $('.deletetab').live('click', function () {
      var result = confirm("Are you sure?");
      if (result == true) {
          $(this).parent().remove();
      }
  });

但我不知道如何将信息发送(使用ajax)到另一个php文件(连接到数据库)，或者我应该使用哪个变量。

抱歉，如果这是一个愚蠢的问题，我是编程新手!

Answer 1

我不知道你如何呈现列表(ul)，假设它是一个foreach循环或类似的东西。您可以将每个项目的 ID 存储在隐藏字段中，以便您可以从 js 访问它的值:

 <ul id="list">
    <li class="i­tem">
        <input type="hidden" class="hidden_id" value="render_id_here" />
        <div class="draggertab">
            <img src="imatges/botofletxa.jpg" width="30" height="30">
        </div>
        <div class="deletetab">
            <img src="imatges/botocreu.jpg" width="30" height="30">
        </div> <span>Buy some cookies</span> 
    </li>
</ul>

js:

$('#list').on('click', '.deletetab', function(){
    var result = confirm("Are you sure?");

    if (result==true) {
         var parent = $(this).parent();

         $.ajax({
             type: 'POST',
             data: { idToDelete: parent.find('.hidden_id').val() }, //Find hidden ID field within parent div and read it's value
             url: 'delete.php'
         }).done(function() { //success callback
                parent.remove(); 
            }).fail(function(qXHR, textStatus) { //error callback
                alert('Server responded with error status ' + textSatus);
            });           
      }  
    });

在服务器端，您需要在发布的数据中搜索“idToDelete”参数。