Question

我在这里有一个小问题。我做了一个小网站书签。现在，我尝试添加删除按钮，因此当我单击“删除”按钮时，我标记为书签的站点将被删除。我做了删除按钮，但是在删除几个站点后它停止工作。我的意思是可以，但是要删除下一个网站，我需要添加越来越多的点击。我不知道这是怎么回事，有人可以解释一下我是什么问题吗？谢谢。

var button = document.getElementById('btn');
button.addEventListener('click', bookmark);

function bookmark(event) {
  var site = document.getElementById('siteName').value;
  var url = document.getElementById('siteUrl').value;
  var ul = document.getElementById('myUl');
  var li = document.createElement('form');

  li.setAttribute('id', 'formId');
  li.setAttribute('class', 'formClass');

  var siteANDurl = {
    siteName: site,
    siteUrl: url
  };

  var child = ul.appendChild(li);

  child.innerHTML = '<div class="well" id="div123">' +
    '<h3>' + site +
    ' <a class="btn btn-default" target="_blank" href="' + url + '">Visit</a> ' +
    ' <a onclick="deleteBookmark(\'' + url + '\')" class="btn btn-danger" href="#" id="lol">Delete</a> ' +
    '</h3>' +
    '</div>';

  event.preventDefault();
}

function deleteBookmark() {
  var ul = document.getElementById('myUl');
  var form = document.getElementById('formId');
  var child = ul.appendChild(form);
  child.style.display = "none";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="header clearfix">
    <nav>

    </nav>
    <h3 class="text-muted">Bookmarker</h3>
  </div>

  <div class="jumbotron">
    <h2>Bookmark Your Favorite Sites</h2>
    <form id="myForm">
      <div class="form-group">
        <label>Site Name</label>
        <input type="text" class="form-control" id="siteName" placeholder="Website Name">
      </div>
      <div class="form-group">
        <label>Site URL</label>
        <input type="text" class="form-control" id="siteUrl" placeholder="Website URL">
      </div>
      <button type="submit" class="btn btn-primary" id="btn">Submit</button>
    </form>
  </div>
  <ul id="myUl"></ul>
  <div class="row marketing">
    <div class="col-lg-12">
      <div id="bookmarksResults"></div>
    </div>
  </div>

  <footer class="footer">
    <p>&copy; 2016 Bookmarker, Inc.</p>
  </footer>

</div>
<!-- /container -->

删除书签的功能不起作用

0 个答案: