javascript - 如何选择创建的元素？

Question

我有博彩公司申请。每次单击提交时，我都想动态创建元素。我这样做了。但是我无法选择特定的按钮删除，因为创建的元素是相同的。

我选择了具有类 button__delete 的元素。它有效，但如果我单击删除第一个元素，它会删除第二个元素。因为每个项目都有类“button__delete”。

this.bookmarksResults.addEventListener("click", ({target}) => { if(target.matches(".button__delete")){ this.deleteBookmark(this.url); } });

接下来，我尝试创建唯一的类 1 并在每次完成列表项时进行迭代。但是我收到错误无法在“元素”上执行“匹配”：“3”不是有效的选择器。

this.bookmarksResults.addEventListener("click", ({target}) => { if(target.matches(bookmarkView.id)){ this.deleteBookmark(this.url); } });

如果你想重现问题，我建议从github下载我的项目。

在这里我提供最少的代码，给你一个大致的想法。HTML

<form id = "bookmarkFormID" class = "bookmarkForm">
   <h3 class = "bookmarkForm__title">Bookmark your Favourite Sites</h3>
   <p class = "bookmarkForm__p">Website Name</p>
   <input id = "siteName" type="text" placeholder= "Website Name">
   <p class = "bookmarkForm__p">Website URL</p>
   <input id = "siteURL" type="text"  placeholder = "Website URL">
   <input class = "submitButton" type="submit" value = "Submit">
</form>
   <div>  
     <ul class = "bookmarkResults">

     </ul>
   </div>

书签模式

 let bookmarkObject = {
        siteName: siteName.value,
        siteURL:  siteURL.value
    };

class BookmarkModal{
    constructor(){

    this.storeData;
    this.getItem;
    this.deleteBookmark
    }
    storeData(siteName, siteURL){
        // TODO Probably there is a better way to select siteName siteURL.
        bookmarkObject.siteName = siteName.value;
        bookmarkObject.siteURL = siteURL.value;

        if(localStorage.getItem("bookmarks") === null){
            let bookmarks = [];
            bookmarks.push(bookmarkObject);
            localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
        }else{
            let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
            bookmarks.push(bookmarkObject);
            localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
        }
        return bookmarkObject;

    }
    getItem(){
     let bookmarks = JSON.parse(localStorage.getItem('bookmarks'));
     return bookmarks;
    }
}

export default BookmarkModal;

书签视图

export const DOMStrings = {
    siteName:       'siteName',
    siteURL:        'siteURL',
    bookmarkForm:   'bookmarkFormID',
    bookmarkResults: '.bookmarkResults',
};

class BookmarkView{
    constructor(){
        // Properties
        this.siteName               = 
        document.getElementById(DOMStrings.siteName);
        this.siteURL                = 
        document.getElementById(DOMStrings.siteURL);
        this.bookmarkForm           = document.getElementById(DOMStrings.bookmarkForm);
        this.bookmarksResults       = document.querySelector(DOMStrings.bookmarkResults);
        this.atagbuttonDelete;
        this.id = 1;

        // Methods
        this.createElement
        this.displayAllBookmark;

    }
    // Create bookmark display element TODO clean it up.
    createElement(name, url){

                // Create elements
                let list  = document.createElement("li");
                let h2    = document.createElement('h2');
                let atag   = document.createElement('a');
                this.atagbuttonDelete = document.createElement('a');
                let atagbuttonEdit   = document.createElement('a');
                let atagbuttonVisit  = document.createElement('a');

                let nameTextNode   = document.createTextNode(name);
                let deleteText = document.createTextNode('Delete');
                let editText   = document.createTextNode('Edit');
                let visitText  = document.createTextNode('Visit');

                atag.className = "bookmarkResults__title";
                atag.href = url;
                atag.target = "_blank";
                this.atagbuttonDelete.className = "button button__delete" + ' ' + this.id;

                // this.atagbuttonDelete.id = 'button__delete' + this.id;
                this.id++;


                atagbuttonEdit.className = "button button__edit";
                atagbuttonVisit.className = "button button__visit";
                atagbuttonVisit.href = url;
                atagbuttonVisit.target = "_blank";

                list.appendChild(h2);
                h2.appendChild(atag)
                atag.appendChild(nameTextNode);
                list.appendChild(this.atagbuttonDelete);
                this.atagbuttonDelete.appendChild(deleteText);
                list.appendChild(atagbuttonEdit);
                atagbuttonEdit.appendChild(editText);
                list.appendChild(atagbuttonVisit);
                atagbuttonVisit.appendChild(visitText);

                return list;      
    }
    displayBookmark(list){
        this.bookmarksResults.insertAdjacentElement('beforeend',list);
    }

}

export default BookmarkView;

总之。我想单击按钮删除。这是我的元素 atagbuttonDelete。并激活收集唯一元素 this.url 的函数 deleteBookmark。

标签： javascript